在blob：url上混淆并将其转换为react-dropzone中的base64

Question

我正在使用包react-dropzone（https://github.com/okonet/react-dropzone）从用户获取图像。用户上传了他们的图像，一切都很好，但是我只能从中得到“ blob：http // blahblah”之类的东西，我需要将图像设置为base64 png。

我的dropzone组件：

<Dropzone ref="dropzone" multiple={false} onDrop={this.onDrop.bind(this)} >
  {this.state.files ?<img className="img-responsive" src={this.state.files[0].preview}></img>
   : <div>Upload Photo</div> }
</Dropzone>

以及获取blob网址的drop函数：

onDrop (files ) {
    if ( files.length === 0 ) {
        alert("upload img please")
        return;
    }
    console.log('Received files: ', files);
    this.setState({files:files})
    var blobURL = files[0].preview
    var reader = new FileReader();
    reader.readAsDataURL(blobURL)
  }

我会得到一个错误：Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

我认为这是因为即时通讯试图传递指向blob的object-url，但是我在哪里可以获取blob以便转换为base64？

Answer 1

我建议使用一个诺言，以通过FileReader.readAsDataURL方法获得异步转换的结果。这是如何完成的示例：

const promise = new Promise((resolve, reject) => {
  const reader = new FileReader()

  reader.readAsDataURL(files[0])

  reader.onload = () => {
    if (!!reader.result) {
      resolve(reader.result)
    }
    else {
      reject(Error("Failed converting to base64"))
    }
  }

})
promise.then(result => {
  // dispatch or do whatever you need with result
}, err => {
  console.log(err)
})