文件上传失败 fileList任然展示问题 && beforeUpload触发之后自动唤起beforeRemove问题

102 阅读1分钟

beforeUpload触发之后,返回false 自动唤起beforeRemove问题

处理方法入下 在beforeRemove里返回false,可以阻断继续触发on-remove钩子

  移除之前的钩子函数
   beforeRemove(file, fileList) {
      if (file && file.status === "success") {
        //移除方法
        return this.$confirm(`确定移除 ${file.name}?`);
      }
      return false;
    },

element的el-upload文件上传组件,在文件上传失败后,fileList任然展示

如下图

image.png

解决方法如下 ①自动提交的处理方法

    移除之前的钩子函数
   beforeRemove(file, fileList) {
      if (file && file.status === "success") {
        //移除方法
        return this.$confirm(`确定移除 ${file.name}?`);
      }
      let idx = this.$refs.uploadFile.uploadFiles.findIndex(
        (item) => item.uid === file.uid
      ); // 关键作用代码,去除文件列表失败文件(uploadFiles为el-upload中的ref值)

      this.$refs.uploadFile.uploadFiles.splice(idx, 1); // 关键作用代码,去除文件列表失败文件 
      return false;
    },

② 手动提交的处理方法

uploadFile (fileObj) { // 上传
	let file = fileObj.file
	uploadImageInfo({ file: file, taskId: this.taskId }).then(res => {
          if (res.success && res.data) {
          	// 后端接口返回后逻辑-todo
              const obj = {
                  name: '文件名.pdf', // 文件名带后缀
                  url: data.path, // 文件路径
              }
              this.fileList.push(obj) // 显示用的
          }
      }).catch(err => {
          console.log(err)
          let uid = file.uid // 关键作用代码,去除文件列表失败文件
          let idx = this.$refs.uploadFile.uploadFiles.findIndex(item => item.uid === uid) // 关键作用代码,去除文件列表失败文件(uploadFiles为el-upload中的ref值)

          this.$refs.uploadFile.uploadFiles.splice(idx, 1) // 关键作用代码,去除文件列表失败文件

      })
}