VUE+ElementUI+VueDraggable +El-ImageViewer 实现图片批量上传，支持拖拽控制顺序及图片预览

话不多说，上代码，没安vuedraggable的小伙伴们自行安装一下

npm install vuedraggable

具体实现：

<template>
    <div>
        <el-upload
            :before-upload="handleBeforeUpload"
            :on-change="handleChange"
            multiple
            action="">
            <el-button>选择图片</el-button>
        </el-upload>

        <div class="image-list">
            <draggable v-model="imageList" @end="handleDragEnd">
                <div v-for="(image, index) in imageList" :key="index" class="image-item">
                    <img width="200px" height="150px" :src="image.url" alt="Image" @click="handleImageClick(index)"/>
                </div>
            </draggable>
        </div>

        <el-button @click="handleUpload">上传</el-button>
        <el-image-viewer
            v-if="viewerVisible"
            :on-close="closeViewer"
            :url-list="getImageShowList"
            :initial-index="currentIndex"/>
    </div>
</template>

<script>
import draggable from 'vuedraggable';
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
    components: {
        draggable,
        ElImageViewer
    },
    data() {
        return {
            fileList: [], // 选择的文件列表
            imageList: [], // 图片列表
            viewerVisible: false, // 预览框可见性
            currentIndex: 0 // 预览图片的索引
        };
    },
    computed:{
        getImageShowList(){
            return this.imageList.map(image => image.url);
        }
    },
    methods: {
        handleBeforeUpload(file) {
            // 添加文件到选择的文件列表
            this.fileList.push(file);
            return false; // 阻止自动上传
        },
        handleChange(file, fileList) {
            debugger;
            // 更新图片列表
            this.imageList.push({
                url: URL.createObjectURL(file.raw),
                file: file
            });
        },
        handleDragEnd() {
            // 拖动结束时更新文件列表顺序
            this.fileList = this.imageList.map(image => image.file);
            debugger;
        },
        handleUpload() {
            // 上传所有图片 这里只做了打印，具体上传逻辑请自行实现
            this.fileList.forEach(file => {
                // 使用你的上传逻辑，例如发送请求到后端进行上传
                console.log('Uploading file:', file);
            });
        },
        // 点击图片时显示原图
        handleImageClick(index) {
            // 点击图片时显示原图
            this.currentIndex = index;
            this.viewerVisible = true;
        },
        // 关闭预览
        closeViewer() {
            this.viewerVisible = false;
        }

    }
};
</script>

<style>
.image-list {
    display: flex;
    flex-wrap: nowrap;
}

.image-item {
    display: inline-block;
    margin-right: 10px;

}
</style>

简单的效果图如下：

控制了下图片显示的大小，另支持点击预览功能，又新认识了个很好用的组件:El-ImageViewer。