文件选择器？使用HTML5将大文件上传到S3而不需要后端。

Question

6

使用multipart/form-data上传文件很简单，大多数情况下都能正常工作，直到您开始专注于上传大文件。如果我们仔细观察文件上传期间发生的情况：

为避免这样的开销，我们将文件转储到磁盘上（Nginx client_body_in_file_only），并管理回调以在后续处理中发送。然后队列工作程序会获取文件并执行所需操作。这对于服务器之间的通信非常顺畅，但我们必须解决客户端上传的类似问题。

我们还拥有客户端S3上传解决方案。没有后端交互发生。对于视频上传，我们使用Zencoder将视频转换为h.264基线/ AAC格式进行管理。

目前我们使用基于s3-swf-upload-plugin的修改版Flash上传程序，结合非常高效但使用Flash的Zencoder JS SDK。

问题是如何使用HTML5文件上传程序实现相同的目标？Filepicker.io和Zencoder是否解决了这个问题？没有后端交互，推荐的管理HTML5文件上传的方式是什么？

要求如下：

- HTML5，不使用Flash - 上传视频并进行后处理以使其与HTML5播放器和移动设备兼容 - 上传图像并进行后处理（调整大小、裁剪、旋转） - 上传文档（如PDF）并具有预览功能。

- Anatoly

我需要再做一些研究，但是 client_body_in_file_only 不会导致更多的磁盘访问，从而降低性能吗？Nginx 文档说它主要用于调试。 - aergistal

1

@aergistal 不，它在我们的生产环境中运行多年，一切都很完美。我与Nginx核心团队开发人员交谈过，他们确认它对于生产工作负载非常稳定。 - Anatoly

2个回答

0

为了将大文件上传到S3，有一个REST API for Multipart Upload，它的工作方式如下：

该API也可从JavaScript中调用，并且可以使用File/Blob slice API将上传的文件分割成多个请求。

唯一的问题是，要能够从JavaScript对S3进行身份验证，您需要传递您的身份验证详细信息。通常通过像PHP这样的中间层来解决此问题，以便身份验证详细信息不会存储在JavaScript文件中。

编辑

像裁剪和调整大小这样的图像操作可以通过画布完成。只需将本地图像加载到画布元素中，进行所需的编辑，然后使用canvas.toDataUrl方法生成jpeg / png图像数据流。
PDF预览是可能的，有一个PDF.js库可以将本地PDF文件渲染到画布中
据我所知，客户端没有进行视频转换的方法

- Lukas Kral

它确实解决了客户端上传的一个特定问题，但其他方面呢？ - Anatoly

刚刚添加了有关图像裁剪和PDF预览的一些信息。 - Lukas Kral

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- 131 · Accepted Answer

我已经使用文件选择器两年了，毫无疑问它的价格是物有所值的。不要尝试管理文件上传（来自Google Drive、iOS、相机、Dropbox等），文件选择器处理得非常好并提供一个可用的URL。花更多时间在核心业务上，文件上传非常容易委派。