關於外部無法訪問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))
      );
    }
 

 

寫下這篇博文的目的是為了讓自己能記得清楚,希望再也不要犯低級的錯誤了

以上