javascript - 文件读取器速度慢且未在 React 上设置状态

Question

当转换 a. pdf 文件转换为 Base64，我需要填写我的状态，但由于某种原因，我的转换速度比我的 setstate 慢，setstate 在设置时始终为空。

我的代码

async transformBase64(inputFile) {    
    return new Promise((resolve, reject) => {
      var fileReader = new FileReader();
      fileReader.readAsDataURL(inputFile)
      if (fileReader.result != undefined){
        resolve(this.setState({ Base64: fileReader.result }), () => {});                
      }else{
        reject("Err")
      }            
    });
  }

我可以做什么来解决我的问题？

Answer 1

您似乎没有为 fileReader 设置 onload 回调。这是为了正确向您的应用程序发出文件数据已加载并准备就绪的信号所必需的，因为 FileReader API 是异步的。

考虑对您的代码进行以下更改来解决您的问题:

async transformBase64(inputFile) {    

    return new Promise((resolve, reject) => {

      var fileReader = new FileReader();

      // If error occurs, reject the promise
      fileReader.onerror = () => {
          reject("Err")
      }

      // Define an onload handler that's called when file loaded
      fileReader.onload = () => {

        // File data loaded, so proceed to call setState
        if (fileReader.result != undefined){
          resolve(this.setState({ 
             Base64: fileReader.result 
          }), () => {});                
        }else{
          reject("Err")
        }  
      }

      fileReader.readAsDataURL(inputFile)

    });
  }