<el-upload
      style="width:100%"
      class="upload-demo"
      drag
      ref="upload-demo"
      action=""
      v-model="taskForm.file"
      :file-list="fileLists"
      :before-upload="handleBeforeUpload"
      :http-request="uploadFile"
      :on-remove="handleRemove"
      :on-change="handleFileChange"
      :limit="3"
      :on-exceed="handleExceed"
      :headers="headers"
      multiple
  >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
      将文件拖拽到此处，或<em>点击上传</em>
      </div>
      <template #tip>
      <div class="el-upload__tip">
          最多上传3个附件
      </div>
      </template>
  </el-upload>
 // 文件上传
    function uploadFiles (fileData) {
        return new Promise((resolve,reject) => {
            // uploadFileData是我自己封装的上传接口请求，修改为自己的接口请求封装方法即可
            // 或者使用axios({method: 'post', data: fileData}).then
            // 自己根据实际情况修改吧
            uploadFileData(fileData).then((res) => {
                console.log('upload', res)
                if (res.code == 200) {
                    fileNameArr.value.push(res.fileName)
                    resolve()
                } else {
                    reject()
                }
            })
        })
    }
    // 文件依次上传
    function uploadAllFile () {
         //一个一个上传
         for (let i = 0; i < fileLists.value.length; i++) {
            // 若是新添加文件即存在fileLists.value.raw,则调用上传接口，否则不需调用
            if (fileLists.value[i].raw) {
                let fileData = new FormData()
                fileData.append('file', fileLists.value[i].raw)

                uploadResult.value.push(uploadFiles(fileData))
                console.log('test-file-up', fileLists.value[i].raw)
            } 
         }
    }
    /** 点击提交按钮 */
    function submitForm() {
        proxy.$refs["taskForms"].validate(valid => {
            if (valid) {
                loading.value = ElLoading.service({
                    lock: true,
                    text: 'Loading'
                })
                if (fileLists.value.length > 0) {
                    // 调用依次上传文件
                    uploadAllFile()

                    Promise.all(uploadResult.value).then(() => {
                        taskForm.value.file = JSON.stringify(fileNameArr.value)
                        console.log('jsont-test', taskForm.value.file)
                        addAndEdit()
                    }).catch((error) => {
                        fileNameArr.value = []
                        loading.value.close()
                        ElMessage({
                            message: '文件上传失败！请重新上传',
                            type: 'error',
                        })
                    })
                } else {
                    addAndEdit()
                }
            }
        })
    }
    function addAndEdit () {
        // 编辑
        if (taskId.value) {
            // editTaskData：项目封装的编辑信息接口请求方法
            editTaskData({传参}).then((res) => {
                console.log('addres-test=', res)
                if (res.code == 200) {
                    ElMessage({
                        message: '编辑成功',
                        type: 'success',
                    })
                    loading.value.close()
                    cancelClick()
                    methods.getTaskList()
                } else {
                    ElMessage({
                        message: res.msg || '编辑失败',
                        type: 'error',
                    })
                }
            }).finally(() => {
                loading.value.close()
            })
        } else { // 新增
           // addTaskData：项目封装的编辑信息接口请求方法
            addTaskData({传参}).then((res) => {
                console.log('addres-test=', res)
                if (res.code == 200) {
                    ElMessage({
                        message: '新增成功',
                        type: 'success',
                    })
                    cancelClick()
                    loading.value.close()
                    methods.getTaskList()
                } else {
                    ElMessage({
                        message: res.msg || '新增失败',
                        type: 'error',
                    })
                }
            }).finally(() => {
                loading.value.close()
            })
        }
    }
    // 点击新增
    function addTasks () {
        taskTitle.value = '新增重保任务'
        showTask.value = true
    }
    // 点击编辑
    function editTasks (row) {
        console.log('test-row', row)
        taskId.value = row.id
        taskForm.value = {...row}
        taskTitle.value = '编辑重保任务'
        showTask.value = true
        fileNameArr.value = JSON.parse(row.file)
        // 文件回显
        fileNameArr.value.forEach(item => {
            fileLists.value.push({ name: item })
        })
        console.log('edoite', taskForm.value, fileNameArr.value, fileLists.value)
    }
    /** 取消按钮 */
    function cancelClick() {
        showTask.value = false
        taskId.value = null
        fileNameArr.value = []
        fileLists.value = []
        taskForm.value.file = ''
        proxy.$refs["taskForms"].resetFields()
    }
    function handleBeforeUpload (file) {
        //获取上传文件大小
        let fileSize = Number(file.size / 1024 / 1024);

        if (fileSize > 100) {
            ElMessage({ message: '文件大小不能超过100MB，请重新上传。', type: 'warning'})
            return false
        }
    }
    function uploadFile (params) {
        if (params.file == null) {
            ElMessage({ message: '请选择需要上传的文件', type: 'warning'})
            return false
        }
    }
    function handleFileChange (file, fileList) {
        fileLists.value = fileList
        console.log('test-filelist',taskForm.value.file, fileLists.value)
    }
    function handleRemove (file, fileList) {
        fileLists.value = fileList
        console.log('test-del-filelist',taskForm.value.file, fileLists.value)
    }
    function handleExceed(files, fileList) {
        ElMessage({ message: '最多上传3个文件，请删除后重新上传！', type: 'warning'})
    }

希望能帮助到你 _啾咪