使用React JS进行S3多部分上传



我正试图从我的React JS应用程序将图像/视频文件上传到S3存储桶中。所以我参考了一些React S3上传器npm包React-dropzone-S3-上传器,reacts-3-uploader-multipart。但在导入React JS组件时,两者都不断给出错误。我已经在我的另一个堆栈问题上发布了这个错误消息(请参考这个qus(。我想直接从我的React应用程序将这个多部分上传到S3 bucket。如果有人知道解决方案,请与我分享。

提前谢谢。

唯一一个完美工作并支持AWS S3多部分的lib是Uppy。强烈建议试用:

https://uppy.io/docs/aws-s3-multipart/

不过,您需要为它提供几个端点,所以请阅读文档。您将看到";伴侣;这里提到,你可以很容易地忽略它,提供5个自定义API所需的端点,一切都会很好。我建议运行UI部分,为这5个功能输入一些伪URL,并检查浏览器的网络活动,以更快地了解它的工作原理。

  1. 一个调用S3多部分API以创建新上传的函数
  2. 一个调用S3 Multipart API以列出文件中已上载的部分的函数
  3. 为指定的零件号生成一批签名URL的函数
  4. 一个函数,调用S3 Multipart API以中止Multipart上载,并删除到目前为止已上载的所有部分
  5. 调用S3 Multipart API以完成Multipart上传的函数,将所有部分合并到S3桶中的单个对象中

然而,无论你以何种方式构建多部分上传,你都需要开始上传,列出部分,获得签名的URL来上传每个部分,取消上传&完成所以构建这个永远不会是3分钟的任务,但有了Uppy,我取得了大部分成功。

您可以使用React Dropzone Uploader,它可以开箱即用地为您提供文件预览(包括图像缩略图(,还可以为您处理上传。

上传有进度指示器,可以取消或重新启动。用户界面是完全可自定义的。

下面是一个如何使用预先签名的URL将文件直接上传到S3存储桶的示例。

完全披露:这个图书馆是我写的。

这里有一种通过express文件上传实现全栈MERN的方法。这里的服务器代码是最少的。这可能会有帮助,如果没有,不用担心!

https://link.medium.com/U1SdsoHMy2