将文件类型转换为数据 URI - React-Dropzone

【问题标题】：Convert File type to Data URI - React-Dropzone将文件类型转换为数据 URI - React-Dropzone
【发布时间】：2017-02-10 19:51:40
【问题描述】：

我在将 React-dropzone 与 FeathersJS Upload 集成时遇到问题

当您将 datauri 发布到我的上传端点时，我已经成功实现了 RESTful 上传。 { uri: data:image/gif;base64,........}

我的问题是在 react-dropzone 中选择文件并提交表单时，我看到 File 类型...看来我需要以某种方式将其转换为数据 URI。

这应该由 Dauria 处理...但我认为我的问题出在我的 POST 请求中，没有使用正确的文件格式设置 file 属性。我应该将File 转换为FormData 吗？

【问题讨论】：

标签： reactjs multipartform-data dropzone.js

【解决方案1】：

这是从 File 对象执行此操作的一种方法：

使用 Image 和 FileReader 可以获取宽度、高度和 base64 数据：

onDrop = (acceptedFiles, rejectedFiles) => {
  const file = acceptedFiles.find(f => f)
  const i = new Image()

  i.onload = () => {
    let reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
      console.log({
        src: file.preview,
        width: i.width,
        height: i.height,
        data: reader.result
      })
    }
  }
  
  i.src = file.preview
}

【讨论】：

感谢您的回复。我假设我需要在 onload 触发后使用 Promise 来解决，以便在 redux 中处理这个问题。
不知道，我正在使用 mobx，所以在我得到触发器后，我只是更新状态。在 vanilla React 中，您可以使用 setState() 来完成。