文件 Reader 很慢且未在 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)

    });
  }

文件 Reader 很慢且未在 React 上设置状态

File Reader is slow and not set state on React

javascript

state

filereader

reactjs