将 dropzone 缩略图发送到服务器答案

【问题标题】：Send dropzone thumbnail to server将 dropzone 缩略图发送到服务器
【发布时间】：2015-06-14 13:57:51
【问题描述】：

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

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

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

});

还有一个“缩略图”事件，但我无法访问 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
        }
    });
});

希望这会有所帮助！

【问题讨论】：

标签： javascript dropzone.js

【解决方案1】：

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

一个版本：

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

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

【讨论】：

我遇到了这个问题，它 90% 的时间都在工作，但它时不时地用无效的 base64 向服务器发送请求。
可能是浏览器还没有生成缩略图，请稍等片刻再发送请求：setTimeout(function() {file.thumbnail = thumb; myDropzone.processQueue();}, 1000)
感谢您的评论，我差点忘了这条评论。是的，我想通了，所以我现在有一个超时功能，在处理上传之前等待 1 秒

【解决方案2】：

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

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

如果我发现了什么，我会在这里添加。

【讨论】：