element-ui 中 如何在el-upload的移除文件列表事件 on-remove 中调用后端进行数据库的删除。
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
问题描述:
刚开始的时候我设置的是实时上传: 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就可以拿到了,神奇了(好吧,我也没有明白啥情况,反正是一脸懵逼)
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:5 个月前 )
c345bb45
9 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 9 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)