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

Question

我在集成React-dropzone和FeathersJS Upload时遇到了问题

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

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

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

Answer 1

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

​

​

使用图像和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
}

​