如何使用 react-dropzone 将文件上传到 Amazon S3？

问题描述

我一直致力于一个涉及 react-dropzone 包的项目。我成功构建了一个容器来添加文件，但现在我不知道如何将这些文件上传到我的 Amazon S3 存储桶。当我添加文件时，它会创建这些“文件”对象，但它包含的只是名称、大小、路径等信息。它似乎不包含实际文件本身。即使文件路径也不是完整的文件路径，它只是文件的名称。该文档没有关于将文件拖到浏览器后可以做什么的任何信息。我不相信每周有 130 万次 NPM 下载的整个软件包都用于展示目的。我对网络开发世界还是个新手，所以可能有一些明显的我不明白的地方。有什么建议吗？

解决方法

react-dropzone 是一个简单的组件，用于从用户那里获取 File 对象。这些文件实现了此处找到的文件 API：https://developer.mozilla.org/en-US/docs/Web/API/File

File 对象本身就是 file。它还具有大小、路径等属性。

react-dropzone 不处理任何类型的上传，或对这些文件做任何事情，这是您的责任。

据我所知，您不能直接从网络上传文件到 S3。您将需要一个服务器/lambda 端点来生成一个签名的 url，然后您可以在客户端中使用它来将文件放入。

所以它变成了一个 3 步过程。

1. 从 react-dropzone 获取文件
2. 从您的端点请求一个 signedUrl
3. 将文件放入signedUrl

这是一个例子：https://medium.com/@kevinwu/client-side-file-upload-to-s3-using-axios-c9363ec7b530

,

你要找的是 FormData 对象 这是一个使用 axios 的例子

for (let i = 0; i < newFiles.length; i++) {
    let file = newFiles[i]
    let formData = new FormData()
    formData.append("file",file)
    formData.append("otherProperties",otherProperties)
    await axios.post(url,formData,{
        headers: {
            'content-type': 'multipart/form-data',Authorization: `Bearer ${token}`,}
    }).then(res => {
        console.log(res.data)
        successfulUploads.push(res.data)
    }).catch(err => {
        console.log(err)
    })
}