问题描述:
刚开始的时候我设置的是实时上传: auto-upload="true",
:http-request="uploadResource"绑定的这个方法就去后端进行实时上传附件了,这个时候就已经保存到数据库。
那么问题来了:
:on-remove="file => handleRemoveFile(file)"当我用绑定的方法进行调用后端进行删除的时候,应为要获取file.id
虽然我在一开始就在watch方法中在 fileList中追加了id,但是我始终拿不到。(md我也不知道为啥,到现在都没有想明白)
watch(
() => props.uploadFileList,
val => {
console.log("watch执行", val);
if (val) {
fileList.value = val.map((el: any) => {
return {
id: el.FileId,
url: serverBaseUrl() + el.Path,
name: el.Name
};
});
}
},
{ immediate: true }
);
<template>
<el-upload
ref="uploadRef"
action="no-use"
:disabled="!disabled"
list-type="picture-card"
v-model:file-list="fileList"
:on-preview="handlePictureCardPreview"
:on-remove="file => handleRemoveFile(file)"
:http-request="uploadResource"
:show-file-list="true"
:auto-upload="true"
accept="image/jpg,image/jpeg,image/png"
>
<el-icon><Plus /></el-icon>
<template #tip>
<div class="el-upload__tip_text-red">*只能上传图片!</div>
</template>
</el-upload>
<el-dialog v-model="dialogVisible">
<img w-full :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
</template>
问题解决:
我就就网上查,发现,都没有好的解决方案,还有用name进行删除的,总感觉欠妥。
将实时上传关闭auto-upload="false", 这样就不会存到数据库了,只需要提交表单的时候掉后端往数据库存。
删除的方法没有修改任何地方,id就可以拿到了,神奇了(好吧,我也没有明白啥情况,反正是一脸懵逼)