javascript - 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 (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，虽然结果看起来已调整大小，但它也被包装为表单。

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

Answer 1

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

我的做法与您的做法相同，只是我删除了 resizeWidth 和 resizeHeight 参数以防止双重处理，并调用了 resizeImage > 相反。

在搞乱日志一段时间后，我突然意识到，这是一个竞争条件!函数 sending 在 xhr 被修改之前返回。具体来说，在createThumbnail中有一个执行异步的FileReader。您的结果已调整大小并包装，因为 xhr 根本没有更改，因此它只是执行正常的代码路径。

因此，只需调用 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);
        })
    }
}