Filepicker？ 通过HTML5将大文件上传到S3，没有后端

Question

使用multipart / form-data上传文件很简单，大部分时间都可以正常工作，直到您开始专注于大文件上传。 如果我们仔细查看文件上传期间发生的情况：

• 客户端发送带有BODY文件内容的POST请求

• webserver接受请求并启动数据传输（如果文件大小超过限制，则返回错误413）

• webserver开始填充缓冲区（取决于文件和缓冲区大小），将其存储在磁盘上并通过套接字/网络发送到后端

• 后端验证身份验证（看一下文件上传后）

• 后端读取文件并删除少量标题Content-Disposition，Content-Type，将其再次存储在磁盘上后端执行文件所需的全部操作

为了避免这种开销，我们将文件转储到磁盘上（Nginx client_body_in_file_only）并管理回调以便进一步向下发送。 然后队列工作者选择文件并执行所需操作。 它适用于服务器间通信非常流畅，但我们必须解决客户端上传的类似问题。

我们还有客户端S3上传解决方案。 没有后端交互发生。 对于视频上传，我们管理视频以转换为带有Zencoder的h.264 Baseline / AAC格式。

目前我们使用基于s3-swf-upload-plugin的改进的Flash上​​传器与Zencoder JS SDK的组合，该SDK非常高效但使用Flash。

题。 如何使用HTML5文件上传器达到相同的目标？ Filepicker.io和Zencoder是否解决了这个问题？ 在没有后端交互的情况下管理HTML5文件上传的推荐方法是什么？

要求如下：

• HTML5，而不是flash
• 通过后期处理上传视频，使其与HTML5播放器和移动设备兼容
• 通过后期处理上传图像（调整大小，裁剪，旋转）
• 使用预览功能上传PDF等文档

https://www.filepicker.com做得好吗？

Answer 1

我现在使用filepicker已有2年了，毫无疑问，这是物有所值的。 不要尝试管理文件上传（从谷歌驱动器，从ios，从我的相机，从Dropbox ...）Filepicker处理得很好，并为您提供随时可用的网址。 花更多时间在您的核心业务上工作，文件上传非常容易委派

Answer 2

要求如下：

HTML5，而不是flash

Filepicker现在支持完整的响应小部件，它是纯html和css。

通过后期处理上传视频，使其与HTML5播放器和移动设备兼容

Filepicker现在能够将大多数视频格式转码为h264和webm以进行移动播放。 https://www.filepicker.com/documentation/file_processing/video_conversion/video

通过后期处理上传图像（调整大小，裁剪，旋转）

Filepicker确实提供了新窗口小部件中的裁剪和旋转，以及通过API调整大小，锐化和水印。

使用预览功能上传PDF等文档

我们提供从19种不同文件格式转换为多种输出格式的功能。 https://www.filepicker.com/documentation/file_processing/document_conversion/document

Answer 3

要将大文件上传到S3，有一个用于分段上传的REST API ，它按以下方式工作

1. 发起上传
2. 上传文件内容分为多个请求
3. 完成上传

API也可用于从javascript调用，并且可以使用File / Blob slice API将上传的文件拆分为多个请求

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

关于SO的类似问题： HTML5和Amazon S3多部分上传

编辑

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