SOURCE

/*
 * @Date: 2020-02-19 14:36:35
 * @LastEditors: bhwa233
 * @LastEditTime: 2020-04-26 10:15:19
 */


new Vue({
    el: "#app",
    data() {
        return {
            fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }]
        };
    },
    methods: {
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 上传事件监听
        uploadProcess(event, file, fileList) {
            debugger
            let uploadFile = this.fileList[file.name];
            // 计算上传速度
            // 通过判断时间戳判断是否为第一次计算

            if (uploadFile.timeStamp === 0) {
                // 先计算出上传速度，再记录第一次时间戳和已上传大小
                uploadFile.uploadSpeed = this.sizeTransformation(event.loaded);
            } else {
                // 通过差值计算出上传速度
                let timeDifference = event.timeStamp - uploadFile.timeStamp;
                let sizeDifference = event.loaded - uploadFile.loaded;

                uploadFile.uploadSpeed = this.sizeTransformation(sizeDifference / (timeDifference / 1000));
            }
            // 记录本次监听的时间戳和已上传大小
            uploadFile.timeStamp = event.timeStamp;
            uploadFile.loaded = event.loaded;

            //  上传进度
            uploadFile.percent = parseInt(event.percent);
        },
        async beforeUpload(file) {
            // 文件大小限制
            let fileSizeLimit = 100 * 1024 * 1024;
            if (file.size > fileSizeLimit) {
                this.$notify({
                    message: `${file.name}文件超过${this.fileLimit.size}MB大小限制`,
                    type: 'error'
                });
                return false;
            }
            // 文件格式限制
            // let suffixsLimitList = this.fileLimit.suffixs;
            // let fileSuffixs = file.name.split('.').pop();

            // if (suffixsLimitList.indexOf(fileSuffixs) !== -1) {
            //     this.$notify({
            //         message: `${file.name}文件，不能上传${fileSuffixs}格式文件`,
            //         type: 'error'
            //     });
            //     return false;
            // }

            //文件重名判断
            //   方法1.如果重复就添加后缀（index）
            let name = file.name
            let fileNameLastIndex = file.name.lastIndexOf('.');
            for (let item of this.fileList) {
                let index = 1;
                while (item.fileName === name) {
                    name = `${file.name.substring(0, fileNameLastIndex)}(${index})${file.name.substring(fileNameLastIndex)}`;
                    index++;
                }
            }
            //   方法2.提醒是否覆盖
            for (let item of this.fileList) {
                if (item.fileName === file.name) {
                    this.$notify({
                        message: `上传失败，${file.name}文件已存在`,
                        type: 'error'
                    });
                    return false;
                    //     let isCover = true;
                    //     that.$confirm(`${file.name}已存在，是否覆盖?`, '提示', {
                    //       confirmButtonText: '确 定',
                    //       cancelButtonText: '取 消',
                    //       type: 'warning'
                    //     }).then(() => {
                    //     }).catch(() => {
                    //     });
                }
            }
            let fileObj = {
                name: file.name,
                // newName:name,
                size: file.size,
                percent: 0,
                status: 'uploading',
                uploadSpeed: '0',
                timeStamp: 0,
                loaded: 0
            };

            this.$set(this.uploadFileList, fileObj.name, fileObj);
            // 处理上传列表card样式
            this.uploadCardShow = true;
            if (this.uploadCardStyle.bottom !== '0') {
                this.minimizeUploadList();
            }
            return true;
        },
    }
}
)

<div id="app">
<div>
   <el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :on-progress="uploadProcess"
  :before-remove="beforeRemove"
  :beforeUpload="beforeUpload"
  multiple
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</div>
</div>

#app{
    background: white;
}