在react-dropzone中，blob:url让我感到困惑，如何将其转换为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 URL 的放置功能：

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)
  }

我会得到一个错误：未捕获的 TypeError：在“FileReader”上执行“readAsDataURL”失败：参数1不是“Blob”类型。

我认为这是因为我尝试传递指向 Blob 的对象 URL，但是我应该从哪里获取 Blob 才能将其转换为 base64？

- Long Phan

---

你能澄清一下你将使用数据URL做什么吗？Blob URL和数据URL大多是可以互换的。例如，如果您想获取数据本身以发送到服务器，那么两种格式都不是特别理想的选择。例如，您可以直接将<img>的src设置为Blob URL，而无需获取数据URL。 - loganfsmyth

我正在尝试将实际的base64编码图像png传递到我的后端，它不接受数据URL或Blob URL。有没有办法从数据或Blob URL获取实际的Blob，以便我可以将其转换为base64？ - Long Phan

不错。看起来似乎和 https://dev59.com/lGct5IYBdhLWcg3wuPq6 有重复？这是一个URL，所以您可以像任何其他URL一样发出XHR请求以获取实际数据。一旦您获得了那个Blob，就可以直接将其作为二进制数据发送到您的服务器。 - loganfsmyth

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)
})

- boldnik