Question

我正在使用包react-dropzone（https://github.com/okonet/react-dropzone）来获取用户的图像。用户上传他们的图像，一切都很好，但我只得到像＆＃34; blob：http // blahblah＆＃34;从它，我需要图像在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 url的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

我建议使用promise来获取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)
})

困惑于blob：url并将其转换为react-dropzone中的base64

1 个答案: