element el-upload新增或编辑文章时上传与删除文件
在新增时,需要给后端一个数组对象,对象里包含name和url属性
在编辑时,后端会给前端返回一个数组对象,对象里包含name和url属性
在使用el-upload组件上传或者删除文件时,组件会自动给:file-list绑定的数组对象中的所有对象,添加一个uid属性,我们可以通过这个属性,对数据进行新增或者删除
<el-form-item label="附件">
<el-upload
class="attachment-uploader"
:action="uploadAttachmentUrl"
:on-remove="handleRemoveAttachment"
:before-remove="beforeRemoveAttachment"
:on-success="onAttachmentUploadSuccess"
multiple
:file-list="dataForm.attachmentList">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
onAttachmentUploadSuccess (response, file, fileList) {
console.log('upload success')
this.dataForm.attachmentList.push({name: file.name, url: response.path})
console.log(this.dataForm.attachmentList)
},
// 删除附件提示
beforeRemoveAttachment (file, fileList) {
return this.$confirm(`确定移除 ${file.name}?`)
},
// 删除附件
handleRemoveAttachment (file, fileList) {
this.dataForm.attachmentList = this.dataForm.attachmentList.filter(item => item.uid !== file.uid)
},