需求

upload 編輯狀態下回顯已上傳的文件信息

分析

1. 添加fileList
   

<el-uploadstyle="width: 100%"ref="uploadRef"class="upload-demo"action="/prod-api/jc/files/upload"multiple:limit="1":on-success="handleUploadSuccess":headers="headers":file-list="FileList"
><el-button type="primary">點擊上傳</el-button><template #tip><div class="el-upload__tip">如果需要重新上傳文件請將舊文件刪除后再上傳</div></template>
</el-upload>

2. 編輯時進行重新賦值回顯

/*** @description : 獲取添加 header 信息* @author : 'Hukang'* @param : ''* @date : 2024-03-04 15:12:19*/
const uploadRef = ref();
const headers = ref({Authorization: 'Bearer ' + getToken(),
});
function handleUploadSuccess(data) {editForm.value.fundsReportId = data.data.id;
}/*** @description : 編輯功能* @author : 'Hukang'* @param : ''* @date : 2024-03-11 09:28:15*/
const FileList = ref([]);
const handleEdit = (data) => {title.value = '編輯';uploadRef.value.clearFiles();visible.value = trueeditForm.value = { ...data };FileList.value = [{uid: 1,name: data?.fundsReport?.fileName,status: 'done',url: data?.fundsReport?.url,},];
};