问题描述:
刚开始的时候我设置的是实时上传: 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-uploadref="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就可以拿到了,神奇了(好吧,我也没有明白啥情况,反正是一脸懵逼)