React-Dropzone 如何将每个文件转换为 base64

Question

我正在使用 react-dropzone 插件上传文件。我担心如何将每个文件转换为 base64：

例如：

这是我获取文件的函数：例如，我在这里为每个文件创建缩略图并附加到对象。但是如何添加到 item here prop like base64string: 并且它会为每个文件保留 base64 数据？

this.onDrop = files => {
      files.map(file =>
        Object.assign(file, {
          preview: URL.createObjectURL(file),
        })
      );
    };

Answer 1

看看这个，你可以得到文件，然后你可以将它们存储到状态实例的图像数组中。

onDropHandler = (files) => {
    files.map(file => {
        const reader = new FileReader();
        reader.onload = (event) => {
            //store result into your state array.
            this.setState(prevState => {
                const updatedImages = [...prevState.images, event.target.result];
                return {
                    images: updatedImages,
                }
            })
            console.log(event.target.result);
        };
        reader.readAsDataURL(file);
    });
}

Answer 2

使用此代码，您将获得一个包含 base64 数据和 blob url 的数组以供预览。

const [data, setData] = useState([])

const onDrop = (files) => {
files.map((file) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    setdata(
      files.map((file) =>
        Object.assign(file, {
          preview: URL.createObjectURL(file),
          base64Image: e.target.result,
        })
      )
    )
  }
  reader.readAsDataURL(file)
})

}

React-Dropzone 如何将每个文件转换为 base64

React-Dropzone how convert each file to base64

reactjs

react-dropzone