Loading...

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)
      },
posted @ 2021-01-26 22:39  awesomego  阅读(3817)  评论(0编辑  收藏  举报