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(); });