Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
417 views
in Technique[技术] by (71.8m points)

javascript - Dropzone客户端调整大小,并将文件上传到AWS预签名的URL(Dropzone client side resize with file upload to AWS pre-signed url)

I implemented image file upload to an AWS s3 bucket with dropzone.

(我实现了将图像文件上传到具有dropzone的AWS s3存储桶中。)

It creates a pre-signed url and ultimately sends the image file to s3.

(它创建一个预签名的URL,并最终将图像文件发送到s3。)

I cannot get this to work in combination with the client side image resizing dropzone provides.

(我无法将其与客户端图像调整dropzone提供的大小一起使用。)

For s3 upload to work properly, I had to override sending , as explained here https://github.com/enyo/dropzone/issues/590 .

(为了使s3上传正常工作,我必须覆盖sending ,如此处https://github.com/enyo/dropzone/issues/590所述 。)

Otherwise, it would send form data and I would get the image wrapped in ------WebKitFormBoundary...

(否则,它将发送表单数据,然后将图像包装在------WebKitFormBoundary...)

This, from the link above is working:

(通过上面的链接,这是有效的:)

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

However, I get problems when I try to combine the above approach with dropzone's client side image resize.

(但是,当我尝试将上述方法与dropzone的客户端图像调整大小结合使用时,会遇到问题。)

As per the dropzone documentation, I specified:

(根据dropzone文档,我指定了:)

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

Debugging the code, the resize functionality is called with the above settings.

(调试代码后,将使用上述设置调用调整大小功能。)

However, the file that arrives at sending is still the original file which has not been resized.

(但是,到达发送的file仍然是未调整大小的原始文件。)

I could not make out where the resized image would be stored.

(我无法确定调整大小后的图像将存储在哪里。)

I tried to change sending as follows:

(我试图更改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);
    }
  }

However, the result from the call to transformFile is a blob and, while the result looks resized, it is also wrapped as a form.

(但是,对transformFile的调用结果是一个blob,尽管结果看起来已调整大小,但它也被包装为表单。)

In summary, can I get the combination of resize with plain image upload to work, somehow?

(总而言之,我可以将调整大小与纯图像上传结合使用吗?)

Is the resized image stored in a suitable place?

(调整尺寸后的图像是否存储在合适的位置?)

Can my override of sending be changed to get this to function?

(我可以更改sending优先级以使其正常运行吗?)

  ask by ikkjo translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

Please log in or register to answer this question.

Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...