javascript - 将拖放区缩略图发送到服务器

Question

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

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

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

});

Threre 还有一个“缩略图”事件，但我无法访问 formData:

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

    });

编辑 @米拉塔 我在 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)(应该位于 Dropzone.js v4 第 1356 行)。

第 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

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

One version:

在插件初始化时禁用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);
});

因此，您无需发送额外的缩略图发送请求，而是将其与原始图像一起发送。