javascript - 如何在 DropZone.js 中上传较小版本和原始图像？

Question

我看了这个帖子:

https://github.com/enyo/dropzone/issues/781

问题是，这似乎会调整原始图像的大小，并且这将是上传到服务器的唯一图像？

我想在我的图库中显示较小的版本，以节省带宽；当用户单击图库中的图像查看完整尺寸时，我想显示原始版本。

如何将较小的调整大小版本和原始版本上传到我的服务器？

(图像发送到我的服务器时将存储在谷歌云存储桶中，然后从客户端上的云存储桶中查询)

这是我当前的代码，它将图像上传到我的服务器。

Dropzone.options.myAwesomeDropzone = {

    autoProcessQueue: false,
    paramName: "image",
    acceptedFiles: 'image/*',
    maxFilesize: 5, // MB
    uploadMultiple: false,
    maxFiles: 1,

    init: function() {
        var myDropzone = this;
        url: '/upload'

        this.on("addedfile", function() {
            if (this.files[1] != null) {
                this.removeFile(this.files[0]);
            }
        });
        this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
        });

        this.on("success", function(response) {
            localStorage.setItem("success_msg_local2", "Post Created. Reload Page");
            window.location.href = "screenshots/index";
        });

        this.on('error', function(file, response) {
            localStorage.setItem("error_msg_local", response);
            window.location.href = "upload";
        });
    }

}

Answer 1

Dropzone 并没有真正提供任何与此相关的内容。您可以尝试在 addedfile 事件中复制文件，向其添加一些标志 (myCopiedFile.isCopied = true;) 并再次添加它(使用 this .addFile(copiedFile)。然后，您需要确保缩略图未显示(通过检查 .isCopied 标志是否已设置)，并且仅在以下情况下才调整其大小:标志是否设置。

我同意 @robin-j 在评论中提出的观点:这是我会在服务器上做的事情。

优点是:

1. 用户需要上传的字节数较少，节省带宽
2. 调整大小时您有更多控制权(可以优化 jpeg 算法以生成尽可能小的文件大小)
3. 您不会冒用户对数据做一些有趣的事情的风险(例如:他们可以编写一个简单的脚本，上传两个完全不同的图像作为缩略图和原始图像)