vue使用ant design vue(upload)文件上传
使用remove的时候是一个函数,刚开始我用的@remove后来用上:remove才可以,因为接收的是一个(点击移除文件时的回调,返回值为 false 时不移除。支持返回一个 Promise 对象,Promise 对象 resolve(false) 或 reject 时不移除。)文档原话,刚开始不知道返回值是什么,蒙了,返回值就是return。<a-upload:action="getUpl
·
使用remove的时候是一个函数,刚开始我用的@remove后来用上:remove才可以,因为接收的是一个(点击移除文件时的回调,返回值为 false 时不移除。支持返回一个 Promise 对象,Promise 对象 resolve(false) 或 reject 时不移除。)文档原话,刚开始不知道返回值是什么,蒙了,返回值就是return。
<a-upload
:action="getUploadAction()"
list-type="picture"
class="upload-list-inline"
@change="handleChange"
:headers="tokenHeader"
v-model="fileList"
:remove='removePhtoto'
:beforeUpload="beforeUpload"
:default-file-list="item.fileList"
@preview="preview"
>
removePhtoto() {
if (this.status_dictText == '已完成') {
this.$message.warning('查看状态下只能查看不能编辑!');
// 直接return一个false就可以了。
return false;
}
}
默认显示后端传过来数据的时候,默认是显示不出来的,一般的逻辑就是循环出来以后然后跟上路径就好了,但是组件中说默认显示的是对象或者数组,因为在后端传过来的数据和组件里面的东西不一样,所以循环这个数组的同时,把里面的每一项的值赋给这个数组。
// 主要就是这几个
detailListItem.fileList.forEach(elementItem => {
elementItem.uid = elementItem.id
elementItem.name = elementItem.fileName
elementItem.url = elementItem.filePath
elementItem.status = 'done'
})
在用upload上传change事件的时候一定要做判断,因为change的状态是有三个的,在done的状态下使用就可以了。在使用change时间的时候一定要加一个判断,要不然就调用三次。
handleChange(info,index,indexcin) {
// console.log(JSON.parse(JSON.stringify(info)))
// 加上这个判断就好了。
if (info.file.status !== 'done') return
const target = this.dabuleList[index].detailList[indexcin]
const getFile = {}
const file = info.file
file.filePath = file.response ? file.response.message : null
file.fileName = file.name
file.relationId = target.id
this.dabuleList[index].detailList[indexcin].fileList = target.fileList.concat(file)
},
当你删除项目照片的时候,你需要删除循环出来的每一项的图片的时候,但是你的点击事件就有一个,你删除一个的时候,所有的就都删除了,那你就得通过他的下标删除。
这俩个都可以的,但是我以前用第二个可以,然后不知道怎么出问题了,删除一个的时候就都删除了,然后用的第一个就好了。
this.dabuleList[fileIndex].detailList[fileLIstIndex].fileList.slice(fileLIstIndex,1);
this.dabuleList[fileIndex].detailList[fileLIstIndex].fileList.pop()
更多推荐
已为社区贡献15条内容
所有评论(0)