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

【问题标题】：How can I upload files to Amazon S3 using react-dropzone?如何使用 react-dropzone 将文件上传到 Amazon S3？
【发布时间】：2021-06-24 21:58:08
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs amazon-web-services react-dropzone

【解决方案1】：

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

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

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

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

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

从 react-dropzone 获取文件
从您的端点请求一个签名网址
将文件放到签名网址中

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

【讨论】：

【解决方案2】：

您正在寻找的是 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)
    })
}

【讨论】：