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

Ana*_*oly 7 javascript upload html5 amazon-s3 filepicker.io

使用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成为一个好工作吗?

Luk*_*ral 0

要将大文件上传到 S3,有一个用于分段上传的 REST API,其工作方式如下

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

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

唯一的问题是,为了能够从 JavaScript 向 S3 进行身份验证,您需要传递身份验证详细信息。这通常可以通过 PHP 等中间层来解决,因此身份验证详细信息不会存储在 javascript 文件中。

SO: HTML5 and Amazon S3 Multi-Part uploads上的类似问题

编辑

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