将文件类型转换为数据URI-React-Dropzone [英] Convert File type to Data URI - React-Dropzone

问题描述

我在将反应拖放区与当您将datauri发布到我的Upload端点时，我已经成功实现了RESTful上传. { uri: data:image/gif;base64,........}

I have successfully implemented the RESTful upload when you POST a datauri to my Upload endpoint. { uri: data:image/gif;base64,........}

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

My issue is when selecting a file in react-dropzone and submitting the form, I am seeing a File type... It seem's I need to somehow convert that to a data URI.

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

This should be handled by Dauria... But I think my issue is in my POST request, not having the file property set with the correct file format. Should I be converting the File to FormData?

推荐答案

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

Here is one way to do it from File object:

使用Image和FileReader可以获取宽度，高度和base64数据:

Using Image and FileReader allows you to get width, height and base64 data:

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
}

这篇关于将文件类型转换为数据URI-React-Dropzone的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！