Question

我正在尝试将Base64编码图像添加到字符串数组中。使用使用react-bootstrap的FormControl创建的文件输入表单：

<FormControl
   type="file"
   values={this.state.files}
   multiple
   onChange={this.addImage.bind(this)}
/>

我正在调用此函数：

addImage(event) {
  var newArr = [];
  for(var i=0; i<event.target.files.length; i++) {
    newArr.push(this.getBase64(event.target.files[i])));
  }
  this.setState({ files: newArr });
}

对图像进行编码的功能如下所示：

getBase64(file) {
  var reader = new FileReader();
  reader.onloadend = function() {
    return reader.result
  }
  reader.readAsDataURL(file);
}

当addImage（）函数调用getBase64（）函数时，返回的值为 undefined 。我相信这是由getBase64（）函数运行所花费的时间引起的。当我添加一个console.log行来吐出reader.result时，base64字符串会正确地输出到控制台，但返回的值显然仍然是相同的。

这里发生了什么，如何才能正确返回实际的base64字符串？

Answer 1

从异步提供结果的事件处理程序中，getBase64函数不会同步返回任何值。 FileReader loadend事件异步返回结果。您可以使用Promise.all()或async/await从getBase64()函数调用中异步返回值

class ReadFiles {
  constructor() {}
  async addImage(event) {
    const newArr = [];
    for (let i = 0; i < event.target.files.length; i++) {
      newArr.push(
        await this.getBase64(event.target.files[i])
      );
    }
    const o = {
      files: newArr
    };

    console.log(o);
  }

  getBase64(file) {
    return new Promise(function(resolve) {
      var reader = new FileReader();
      reader.onloadend = function() {
        resolve(reader.result)
      }
      reader.readAsDataURL(file);
    })
  }

}

let reader = new ReadFiles();

document.querySelector("input[type=file]")
.onchange = e => reader.addImage.call(reader, e);

<input type="file" multiple>

Javascript base64编码函数返回undefined

1 个答案: