关于外部无法访问reader.onload内生成值的解决办法

这两天在写大文件上传时遇到一个需求:要将文件生成SHA1(hash)发送给后台,在使用reader.onload函数时无法将数据保存到该函数外部,尝试网上的办法均无效,今天终于解决了,做个笔记

需求:给选中的file对象生成hash,标识唯一值

//生成hash的函数
// utils.js

// file: 即将上传的file对象
//由于onload是异步读取的,如果在onload函数体下一行直接console.log是无法读取到值的,这个涉及到事件循环,以后有机会再写
export function getHash(file) {
  return new Promise(function (resolve, reject) {
    let reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = () => {
      let wordArray = CryptoJS.lib.WordArray.create(reader.result);
      let hash = CryptoJS.SHA1(wordArray).toString();
      resolve(hash);
    }
  })
}

外部使用

//fileUpload.js
//在要对文件进行操作的地方进行调用这个函数,但是要在原来的函数前使用async/await,同样的原因:onload是异步的
async  uploadFile(file){
  //其余逻辑忽略
  let hash = "";
  hash = await getHash(file);// 在这里,不要写.then ,直接将getHash赋值给一个变量就行了
  console.log(`hash1111111`, hash); 
}
// 

一般retrun promise 都需要 async await 等待他完成,一位来自于百度大厂的老师这样告诉我.

2021年8月1日 今天又看到另一种方法 大同小异,做个笔记(传送门:
https://blog.csdn.net/youngeffort/article/details/89508646?utm_term=axios的put上传文件&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_allsobaiduweb~default-1-89508646&spm=3001.4430)

async Photograph() {
      // 获取用户拍照的图片名字，显示到页面上
      this.fileName = this.$refs.photoref.files[0].name;
      // 获取图片base64 代码，并存放到 base64ImgData 中
      this.base64ImgData = await this.FileReader(this.$refs.photoref.files[0]);
    },
    /**
     * 返回用户拍照图片的base64
     */
    FileReader(FileInfo) {
      // FileReader 方法参考地址：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
      let reader = new FileReader();
      // readAsDataURL 方法参考地址：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL
      reader.readAsDataURL(FileInfo);
      // 监听读取操作结束
      /* eslint-disable */
      return new Promise(
        resolve => (reader.onloadend = () => resolve(reader.result))
      );
    }
 

 

写下这篇博文的目的是为了让自己能记得清楚,希望再也不要犯低级的错误了

以上