Dropzone 客户端通过文件上传到 AWS 预签名 url 调整大小

Question

我使用 dropzone 将图像文件上传到 AWS s3 存储桶。 它创建一个预签名的 url，并最终将图像文件发送到 s3。 我无法将其与调整 dropzone 提供的客户端图像大小结合使用。

为了使 s3 上传正常工作，我必须覆盖sending ，如此处所解释的https://github.com/enyo/dropzone/issues/590 。 否则，它会发送表单数据，我会将图像包装在------WebKitFormBoundary...

这个，从上面的链接工作：

  sending: function(file, xhr) {
    var _send = xhr.send;
    xhr.send = function() {
      _send.call(xhr, file);
    };
  }

但是，当我尝试将上述方法与 dropzone 的客户端图像调整大小相结合时，我遇到了问题。 根据 dropzone 文档，我指定了：

  resizeWidth: 384,
  resizeHeight: 384,
  resizeMethod: 'contain',
  resizeQuality: 1.0,

调试代码，使用上述设置调用调整大小功能。 但是，到达发送的file仍然是未调整大小的原始文件。 我无法弄清楚调整大小的图像将存储在哪里。

我试图改变sending如下：

sending (file, xhr) {
  var _send = xhr.send;

  this.options.transformFile.call(this, file, function (done) {
    console.log('done', done)
    xhr.send = function () {
      _send.call(xhr, done);
    }
  }

但是，调用transformFile的结果是一个 blob，虽然结果看起来已调整大小，但它也被包装为一个表单。

总之，我可以以某种方式将调整大小与普通图像上传相结合吗？ 调整后的图像是否存储在合适的位置？ 可以更改我的sending覆盖以使其正常工作吗？

Answer 1

我刚刚创建了一个帐户来回答这个问题，因为过去几个小时我一直在尝试做同样的事情。

我和你所做的在同一条轨道上，除了我删除了resizeWidth和resizeHeight参数以防止双重处理，并改为调用resizeImage 。

在弄乱日志一段时间后它击中了我，这是一个竞争条件！ 在xhr被修改之前返回的sending函数。 具体来说，在createThumbnail有一个执行异步的FileReader 。 您的结果被调整大小和包装，因为xhr根本没有改变，所以它只是执行正常的代码路径。

因此，只需在xhr.send中调用调整大小函数xhr.send ！ 🎉🥳

这是我的工作代码：

sending: function(file, xhr) {
    var _send = xhr.send;
    var _this = this
    xhr.send = function () {
        _this.resizeImage(file, 500, 500, 'contain', function (done) {
            _send.call(xhr, done);
        })
    }
}

Answer 2

我在 github 和 pkl 的解决方案（ https://github.com/enyo/dropzone/issues/1840#issuecomment-538643878 ）上问了同样的问题，对我有用：

xhr.send = formData => {
  // get the resized file in formData.get("file") vs file
  _send.call(xhr, formData.get("file"));
 };

另外，joshmaines 发布（ https://github.com/enyo/dropzone/issues/1840#issuecomment-545590304 ）：

您还可以覆盖进程队列并在缩略图函数中实现它： this.on('thumbnail', function(file, thumb) { file.thumbnail = thumb; this.processQueue(); });