Question

是否有可能将生成的Dropzone.js缩略图发送到服务器？

我已经尝试过“发送”事件，但我无法访问缩略图：

myDropzone.on('sending', function(file, xhr, formData) {

});

Threre也是一个“缩略图”事件，但我无法访问formData：

 myDropzone.on('thumbnail', function(file, dataUrl) {

    });

修改 @mirata 我在dropzone.js文件中更改了一些内容：

Dropzone.prototype._finished = function(files, responseText, e) {
  var file, _i, _len;
  for (_i = 0, _len = files.length; _i < _len; _i++) {
    file = files[_i];
    file.status = Dropzone.SUCCESS;
    file.fid = responseText;
    this.emit("success", file, responseText, e);
    this.emit("complete", file);
  }
  [...]
};

我添加了“file.fid = responseText;”存储服务器响应（在我的例子中，fileid）（应该在1356行，Dropzone.js v4）。

在第309行，“file.thumbnail = dataUrl;”

[...]
thumbnail: function(file, dataUrl) {
    var thumbnailElement, _i, _len, _ref;
    if (file.previewElement) {
      file.thumbnail = dataUrl;
      file.previewElement.classList.remove("dz-file-preview");

      [...]
    }
  },
[...]

最后我用“成功”事件保存了我的缩略图：

myDropzone.on('success', function(file) {
    $.ajax({
        url: 'url',
        method: 'post',
        data: {
            fileId: file.fid,
            thumbnail: file.thumbnail
        }
    });
});

希望这有帮助！

Answer 1

直接在插件中进行更改是不正确的方法（在这种情况下，您无法使用f.e.npm或bower更新插件或包含它们）。您必须覆盖插件或尝试使用插件功能解决问题（Dropzone提供了大量events）。

一个版本：

在插件init上禁用autoProcessQueue：

autoProcessQueue: false

创建缩略图后处理图像队列：

myDropzone.on('thumbnail', function(file, thumb) {
    file.thumbnail = thumb;
    myDropzone.processQueue();
});

在发送图片之前也包括缩略图：

myDropzone.on('sending', function(file, xhr, formData) {
   formData.append('thumbnail', file.thumbnail);
});

因此，您无需另外发送缩略图请求，而是使用原始图片发送。

Answer 2

我遇到了类似的问题。 “发送”似乎首先发生，然后是“缩略图”，这是在一个单独的线程上完成的。这意味着可以在上传完成之前或之后的任何时刻在后台生成缩略图。对我们来说并不理想。

我们真正需要的是一种触发缩略图处理并在发送到服务器之前完成的方法，或者弄清楚如何将缩略图作为辅助操作发送，并知道缩略图需要存储的记录。

如果我想出了什么，我会在这里添加它。

将dropzone缩略图发送到服务器

2 个答案: