FileReader 实现单文件和多文件上传

一、上传单文件

调用方法即可，无需特殊处理

<!--隐藏 input，通过 button 打开文件选择窗口 -->
<input type="file" value="请点击上传附件" @change="onFileChange" style="display:none" ref="upload" />
<button :text="$t('BUTTON_UPLOAD')" type="add" @click="uploadFile""/>

 //点击按钮
uploadFile: function () {
  //条件判断
  this.$refs.upload.click();
},
//input输入框发生变化时触发该事件
onFileChange: function () {
  var that = this;
  var id = that.workOrderId;
  var files = that.$refs.upload.files;
  var reader = new FileReader();
  var file = files[0];
  var ifSame = that.checkSameName(file.name);
  if (ifSame) {
    that.$message({
      type: 'warning',
      message: that.$t('ExistSameFile')
    })
  } else {
    reader.readAsDataURL(file);
    reader.onload = function (f) {
      //大小限制
      if (file.size >= that.fileAutoSize) {
        that.$message({
          type: 'warning',
          message: that.$t('FileIn3M')
        })
      } else {
        var annotation = {};
        annotation["name"] = file.name;
        annotation["type"] = file.type;
        if (f.target.result !== "data:") {
          annotation["documentbody"] =         
          f.target.result.substring(f.target.result.indexOf(",") + 1);
        }
        annotation["id"] = id;
        annotation["filesize"] = file.size;
        var requestStr = '...'
        my.post(requestStr, annotation).then((res) => {
          //刷新数据
        }).catch((error) => {
          //提示报错
        })
      }
    }
  }
  that.$refs.upload.value = '';
},
//检查是否有同名文件
checkSameName: function (val) {
  if (this.attachmentData.length == 0) {
    return false;
  } else {
    for (var i in this.attachmentData) {
      if (this.attachmentData[i].filename == val) {
        return true;
      }
    }
    return false;
  }
},

二、上传多个文件

问题：

调用 reader.readAsDataURL(file) 后使用 reader.onload = function (f) {}，在 function 中添加上传后端方法，如果上传单个文件没有问题，但如果上传多个文件，由于异步调用，会出现上传两个相同文件的情况

解决方式：

使用 promise 对象对 readAsDataURL 函数进行封装，弃用 onload 方式上传，得到 base64 格式字符串后直接上传文件对象，因为还是异步调用，需要用到 async 和 await，否则还是会出现上述问题

<input type="file" value="请点击上传附件" @change="onFileChange" style="display:none" ref="upload" multiple />
<button :text="$t('BUTTON_UPLOAD')" type="add" @click="uploadFile" />

//上传附件
uploadFile: function() {
  //条件判断
  this.$refs.upload.click();
},
readFileAsDataURL : function(file) {  
  return new Promise((resolve, reject) => {  
      const reader = new FileReader();  
      reader.onload = (event) => {  
          resolve(event.target.result); // 当读取完成时，解析Promise  
      };  
      reader.onerror = (error) => {  
          reject(error); // 如果读取发生错误，拒绝Promise  
      };  
      reader.readAsDataURL(file); // 开始读取文件  
  });  
}  ,
//input输入框发生变化时触发该事件
async  onFileChange() {
  var that = this;
  var id = that.objectId;
  var files = that.$refs.upload.files;
  for(var i = 0; i < files.length; i++){
    var file = files[i];
    // var data = this.readFileAsDataURL(file);
    await this.readFileAsDataURL(file).then(data =>{
      var annotation = {};
      annotation["name"] = file.name;
      annotation["type"] = file.type;
      annotation["documentbody"] = data.substring(data.indexOf(",") + 1)
      if (that.showDetail) {
        annotation["subject"] = that.subject;
        annotation["nodetext"] = that.noteText;
      }
      annotation["id"] = id;
      annotation["filesize"] = file.size;
      annotation["entityname"] = that.entityname;
      var requestStr = "...";
      my.post(requestStr, annotation)
        .then(res => {
          //刷新数据
        })
        .catch(error => {
          //提示报错
        });
    }).catch(error => {
          //提示报错
    })
  }
  that.$refs.upload.value = "";
},
//检查是否有同名文件
checkSameName: function(val) {
  if (this.attachmentData.length == 0) {
    return false;
  } else {
    for (var i in this.attachmentData) {
      if (this.attachmentData[i].filename == val) {
        return true;
      }
    }
    return false;
  }
}