vue中el-upload结合vuedraggable实现图片的上传、排序、删除以及预览等功能_element upload

<template>
    <div>
        <ul class="el-upload-list el-upload-list--picture-card" style="display:flex;">
            <div>
                <!-- start：拖拽开始 end：拖拽结束  imageLists：需要展示图片的数组-->
                <draggable class="el-upload-list el-upload-list--picture-card" v-model="imageLists" @start="onStart"
                    @end="onEnd">

                    <div class="el-upload-list__item is-success" v-for="(item, index) in imageLists" :key="item + index">
                        <li>
                            <div class="content1">
                                <img :src="item.url" class="el-upload-list__item is-success" />
                                <span class="el-upload-list__item-actions">
                                    <!-- 删除图片 -->
                                    <span class="remove">
                                        <i class="el-icon-delete" @click="delImg(index)"></i>
                                    </span>
                                    <!-- 放大图片 -->
                                    <span class="remove">
                                        <i class="el-icon-circle-plus-outline"
                                            @click="handlePictureCardPreview(item.url)"></i>
                                    </span>
                                </span>
                            </div>
                        </li>
                    </div>
                </draggable>
            </div>
            <el-upload action="#" list-type="picture-card" :auto-upload="false" :show-file-list="false" :on-change="handleChange" multiple>
                <i slot="default" class="el-icon-plus"></i>
            </el-upload>

            <!-- 图片回显预览 -->
            <el-dialog title="图片预览" :visible.sync="dialogVisible" width="50%" height="80%" append-to-body>
                <img :src="dialogImageUrl" alt="" style="width:100%;height:100%" />
            </el-dialog>
        </ul>
    </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
    components: {
        draggable,
    },
    data() {
        return {
            imageLists: [   
            ],
            drag: false,
            dialogImageUrl: "",
            dialogVisible: false,
            resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
            
        };
    },
    components: {
        draggable,
    },

    methods: {
        handleChange(file) {
            debugger;
            var obj = {
                  url: file.url,
                  name: file.name,
              }

            this.imageLists.push(obj);
        },
        //开始拖拽事件
        onStart() {
        },
        //拖拽结束事件
        onEnd(e) {
            console.log(e); // 这里将会有调整前后的 index 及其他可能需要传递给接口的信息

        },
        beforeAvatarUpload(file) {
            console.log(file);
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);

        },
        delImg(index) {
            this.imageLists.splice(index, 1)
        },
        handleUploadSuccess(response, file, fileList) {
            console.log(response, file, fileList);
        },
        handlePictureCardPreview(url) {
            this.dialogImageUrl = url;
            this.dialogVisible = true;
        },

    },
};
</script>
<style lang="sass" scoped></style>