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

IT技术 reactjs multipartform-data dropzone.js
2021-05-20 16:52:03

我在将React-dropzoneFeathersJS Upload集成时遇到问题

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

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

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

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
}