<el-form-item prop="file" label="附件">
     <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>點(diǎn)擊上傳</em>
         </div>
         <template #tip>
         <div class="el-upload__tip">
             最多上傳3個(gè)附件
         </div>
         </template>
     </el-upload>
 </el-form-item>

function handleBeforeUpload (file) {
        //獲取上傳文件大小
        let fileSize = Number(file.size / 1024 / 1024);
        if (fileSize > 100) {
            ElMessage({ message: '文件大小不能超過(guò)100MB，請(qǐng)重新上傳。', type: 'warning'})
            return false
        }
    }
    function uploadFile (params) {
        if (params.file == null) {
            ElMessage({ message: '請(qǐng)選擇需要上傳的文件', type: 'warning'})
            return false
        }
    }
    function handleFileChange (file, fileList) {
        fileLists.value = fileList
    }
    function handleRemove (file, fileList) {
        fileLists.value = fileList
    }
    function handleExceed(files, fileList) {
        ElMessage({ message: '最多上傳3個(gè)文件，請(qǐng)刪除后重新上傳！', type: 'warning'})
    }

 /** 提交按鈕 */
    function submitForm() {
        proxy.$refs["taskForms"].validate(valid => {
             // 表單其他必填字段校驗(yàn)一下
            if (valid) {
            // 加個(gè)loading
                loading.value = ElLoading.service({
                    lock: true,
                    text: 'Loading'
                })
                // 判斷是否上傳了文件 沒(méi)有就不用調(diào)用上傳
                if (fileLists.value.length > 0) {
                    console.log('list', fileLists.value)
                    let fileData = new FormData()
                    var isAdd = false // 區(qū)別是否上傳了新文件
                    var ids = [] // 編輯時(shí)存儲(chǔ)已經(jīng)回顯的文件ids
                    // 這里因?yàn)榫庉嫼托略鲞壿嫸加?，所以在編輯時(shí)需要區(qū)分，
                    // 到底是上傳了新文件，還是說(shuō)依舊是原來(lái)的文件，再提交一下表單,提交其他字段而已
                    // 而判斷是否是最新上傳的文件就依據(jù)是否有文件流raw
                    for(var i =0 ; i< fileLists.value.length; i++) {
                        // 通過(guò)是否有文件流raw判斷是否上傳新文件，是則append
                        if (fileLists.value[i].raw) {
                            isAdd = true
                            fileData.append('file', fileLists.value[i].raw)
                        } else {
                            // 拿到回顯文件(即非新上傳文件)的id
                            ids.push(fileLists.value[i].id)
                        }
                    }
                    console.log('ids=', ids)
                    fileData.append('type', 1) // type代表上傳操作是哪個(gè)模塊的：1任務(wù) 2總結(jié) 
                    // 若isAdd=true,則說(shuō)明添加了新文件，調(diào)用上傳
                    if (isAdd) {
                        uploadFileData(fileData).then((res) => {
                            console.log('upload', res)
                            if (res.code == 200) {
                                // 回顯文件id數(shù)組和新上傳文件得到的id數(shù)組合并
                                taskForm.value.file = ids.concat(res.result.ids)
                                console.log('file-ids',taskForm.value.file)
                                addAndEdit() // 調(diào)用保存其他字段信息的接口
                            }
                        })
                    } else {
                        taskForm.value.file = ids
                        addAndEdit() // 調(diào)用保存其他字段信息的接口
                    }
                } else {
                    taskForm.value.file = ''
                    addAndEdit() // 調(diào)用保存其他字段信息的接口
                }
            }
        })
    }

// 點(diǎn)擊編輯
    function editTasks (row) {
        let fileData = new FormData()
        fileData.append('fileId', row.file)
        // 獲取文件名
        getFileData(fileData).then((res) => {
            console.log('test', res)
            if (res.code == 200) {
                // 就是這里，拿到文件名，然后文件回顯，我這里是通過(guò)接口拿到文件名，
                // 如果你能更直接的拿到文件名，直接執(zhí)行這個(gè)foreach即可
                res.result.forEach((item) => {
                // 回顯重點(diǎn)，就是把你需要的東西push到fileList中
                    fileLists.value.push({ name: item.fileName, id: item.id })
                })
                console.log('edoite', taskForm.value, fileLists.value)
            }
        })
        taskId.value = row.id
        taskForm.value = {...row}
        taskTitle.value = '編輯任務(wù)'
        showTask.value = true
        taskForm.value.file = row.file !== 'null' ?  JSON.parse(row.file) : []    }