vue中element 的上传功能

最近有个需求，需要在上传文件前，可以进行弹窗控制是否上传upload
看完文档后，感觉有两种思路可以实现

• 基于before-upload :上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。

• 基于auto-upload, on-change手动上传来控制

初始代码

// template
    
    
    
// javscriptdata() {    return {
      imageUrl: ""
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {      // 文件类型进行判断  
      const isJPG = file.type === "image/jpeg";      const isLt2M = file.size / 1024 / 1024 < 2;      if (!isJPG) {        this.$message.error("上传头像图片只能是 JPG 格式!");
      }      if (!isLt2M) {        this.$message.error("上传头像图片大小不能超过 2MB!");
      }      return isJPG && isLt2M;
    }
  }

初始效果图

考虑在before-upload中进行弹窗后，return false | reject() 即可
修改代码

由于this.$/confirm/i是异步操作，因而需要等待其结果才能进行下一步操作

async  beforeAvatarUpload(file) {
      const isSubmit = await this.$confirm('此操作将上传文件, 是否继续?', '提示', {
          /confirm/iButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {          return true
        }).catch(() => { 
          return false        
        });        console.log(isSubmit)      return isSubmit;
  }

确认提交和取消提交 ==> 结果却一样

• 确认提交
  

• 取消提交
  

结果却不可以，因而考虑另一种思路了,before-upload只是进行判断文件是否适合，从而是否上否上传到服务器，而不是用来等待用户进行操作使用的

• auto-upload设置为文件导入后是否马上上传到服务器

• on-change 用来查看文件现在的转态

// template
  
  点击上传
// jsdata() {return {
    fileList: [
    ],    bool: true
  }
},
methods: {
  handleRemove(file, fileList) {
    console.log(file, fileList);
  },
  handlePreview(file) {
    console.log(file);
  },
  handleError(err, file) {
      alert('失败')      this.fileList = []
  },
  handleSuccess(res, file) {
    alert('成功')    this.fileList = []
  },
  handleExceed(files, fileList) {},  async handleChange() {    const isSubmit = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
      /confirm/iButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {      return false
    }).catch(() => { 
      return true        
    });    if (isSubmit) {      this.$refs.upload.submit()  
    } else {      this.fileList = []
    }
  }  
}

• 确认提交

• 取消提交
  

此方法可行，现在就是控制因为文件状态改变而导致两次弹窗, 修改如下

• 文件状态变更 不是成功就是失败，因而在成功失败的函数进行控制即可

添加flag标识进行控制弹窗即可

data() {  return {
    is/confirm/i: true
  }
}

async handleChange() {  if (!this.is/confirm/i) {    this.is/confirm/i = true
    return
  }

  const bo = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    /confirm/iButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {    return false
  }).catch(() => { 
    return true        
  })  if (bo) {    this.$refs.upload.submit()    this.is/confirm/i = false
  } else {    this.fileList = []
  }
}

修改后便可以了，只是注意 在 on-error和 on-succes中注意清空 fileList = []，这样还可以重新添加文件

• 确定上传
  

• 取消上传
  

截止目前任务算是完成，只是依旧有些扎心，只好继续笃定前行了
没事的时候，还是多看文档，这样才能避免不要的坑，以及可以有更多的思路

原文出处