基于element-ui upload进行二次封装，可拖拽上传列表

<template>
    <div>
        <el-upload
          ref="upload"
          class="upload"
          :drag="drag"
          :disabled="disabled"
          :multiple="multiple"
          :auto-upload="autoUpload"
          :show-file-list="showFileList"
          :with-credentials="withCredentials"
          
          :limit="limit"
          :accept="accept"
          :list-type="listType"
          
          :name="name"
          :action="action"
          :data="extraParams"
          :headers="requestHeaders"
          
          :http-request="isRequest ? handleHttpRequest : undefined"

          :on-error="handleError"
          :on-exceed="handleExceed"
          :on-change="handleChange"
          :on-remove="handleRemove"
          :on-success="hendleSuccess"
          :on-preview="handlePreview"
          :on-progress="handleProgress"

          :before-upload="handleBeforeUpload"
          :before-remove="handleBeforeRemove"


          :file-list="fileList"
        >
          <slot></slot>
          <slot name="trigger"></slot>
          <div slot="tip">
            <slot name="tip"></slot>
          </div>
          <div v-if="isSlotFile" slot="file" slot-scope="scope">
            <slot name="file" v-bind="scope"></slot>
          </div>
        </el-upload>
    </div>
</template>

<script>
import Sortable from 'sortablejs';
export default {
    name: 'customUpload',
    props: {
        // 属性
        isRequest: {
            type: Boolean,
            default: () => false
        },
        isSlotFile: {
            type: Boolean,
            default: () => false
        },
        drag: {
            type: Boolean,
            default: () => false
        },
        sortable: {
            type: Boolean,
            default: () => false
        },
        disabled: {
            type: Boolean,
            default: () => false
        },
        multiple: {
            type: Boolean,
            default: () => false
        },
        autoUpload: {
            type: Boolean,
            default: () => true
        },
        showFileList: {
            type: Boolean,
            default: () => true
        },
        withCredentials: {
            type: Boolean,
            default: () => false
        },
        // 文件限制
        limit: {
            type: Number,
            default: () => 1
        },
        maxSize: {
            type: Number,
            default: () => 100 * 1024
        },
        accept: {
            type: String,
            default: () => '.jpg,.JPG,.png,.PNG'
        },
        listType: {
            type: String,
            default: () => 'text'
        },
        imgWidth: {
          type: Number,
          default: () => 0
        },
        imgHeight: {
          type: Number,
          default: () => 0
        },

        // 文件上传参数
        name: {
            type: String,
            default: () => 'file'
        },
        action: {
            type: String,
            default: () => ''
        },
        extraParams: {
            type: Object,
            default: () => ({})
        },
        requestHeaders: {
            type: Object,
            default: () => ({})
        },

        // 上传事件
        onError: { type: Function, default: function () { } },
        onExceed: { type: Function, default: function () { } },
        onChange: { type: Function, default: function () { } },
        onRemove: { type: Function, default: function () { } },
        onSuccess: { type: Function, default: function () { } },
        onPreview: { type: Function, default: function () { } },
        onProgress: { type: Function, default: function () { } },
        beforeUpload: { type: Function, default: function () { return true; } },
        beforeRemove: { type: Function, default: function () { return true; } },

        httpRequest: { type: Function, default: function () { } },

        customList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            fileList: []
        }
    },
    watch: {
        fileList: {
            deep: true,
            immediate: true,
            handler(val) {
                this.$emit('update:customList', val);
            }
        },
        customList: {
            deep: true,
            immediate: true,
            handler(val) {
                if(!this.fileList.length) {
                    this.fileList = val;
                }
            }
        }
    },
    computed: {

    },
    mounted() {
        let _this = this;
        if (this.sortable) {
            var list = this.$el.querySelector('.el-upload-list');
            Sortable.create(list, {
                onEnd: (ev) => {
                    let arr = _this.fileList;
                    arr[ev.oldIndex] = arr.splice(ev.newIndex, 1, arr[ev.oldIndex])[0];
                },
            });
        }
    },
    methods: {
        // 清空
        clearFiles() {
            this.$refs['upload']['clearFiles']();
        },

        // 提交
        submit() {
            this.$refs['upload']['submit']();
        },

        // 取消
        abort() {
            this.$refs['upload']['abort']();
        },


        // 文件上传事件
        handleError(err, file, fileList) {
            this.onError(err, file, fileList);
        },

        handleExceed(files, fileList) {
            this.onExceed(files, fileList);
        },

        handleChange(file, fileList) {
            this.onChange(file, fileList);
        },

        handleRemove(file, fileList) {
            this.fileList = fileList;
            this.onRemove(file, fileList);
        },

        hendleSuccess(response, file, fileList) {
            response.name = file.name;
            response.url = file.url;
            this.fileList.push(response);
            this.onSuccess(response, file, fileList);
        },

        handlePreview(file) {
            this.onPreview(file);
        },

        handleProgress(event, file, fileList) {
            this.onProgress(event, file, fileList);
        },

        // 文件上传前操作
        handleBeforeUpload(file) {
            let accept = this.accept;
            let maxSize = this.maxSize;
            let isMaxSize = file.size < maxSize;
            let isOkExt = accept.indexOf(file.name.substring(file.name.lastIndexOf('.'))) >= 0;

            if (!isOkExt) {
                accept = accept.replace(/\,\./g, '/');
                accept = accept.replace('.', '');
                this.$message.error(`只能上传${accept}格式的文件`);
                return false;
            }

            if (!isMaxSize) {
                const { size, sizeType } = this.sizeTypes(maxSize);
                this.$message.error(`上传文件大小不能超过${size}${sizeType}`);
                return false;
            }

            if(this.imgWidth && this.imgHeight) return this.scaling({ file, width: this.imgWidth, height: this.imgHeight });

            return this.beforeUpload(file);
        },

        handleBeforeRemove(file) {
            return this.beforeRemove(file);
        },

        // 自定义上传
        handleHttpRequest(files) {
            this.httpRequest(files);
        },
        
        // 文件大小类型
        sizeTypes(maxSize) {
            if (maxSize >= 1024 * 1024) {
                let size = parseInt(maxSize / 1024 / 1024);
                return {
                    size,
                    sizeType: 'M'
                }
            } else if (maxSize >= 1024) {
                const size = parseInt(maxSize / 1024);
                return {
                    size,
                    sizeType: 'kb'
                }
            } else {
                return {
                    size: maxSize,
                    sizeType: 'b'
                };
            }
        },


        // 对比图片比例
        scaling({ file, width, height }) {
            return new Promise(function (resolve, reject) {   //upload内部需要一个promise,简单的return出false并没有什么用
                let _URL = window.URL || window.webkitURL;
                let image = new Image();
                image.onload = function () {
                    let valid = image.width === width && image.height === height;
                    valid ? resolve(true) : reject(false);
                };
                image.src = _URL.createObjectURL(file);    //onload是异步加载，所以一定要在onload后在执行判断图片尺寸
            }).then(
                () => {
                    return file;
                },
                () => {
                    this.$message.error("请上传正确的图片比例");
                    return Promise.reject(false);
                }
            );
        }


    }
}
</script>