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

Question

我看着这个线程：

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

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

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

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

（将图像发送到我的服务器后，图像将存储在google cloud桶中，然后从客户端的cloud桶中查询）

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

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事件中复制文件，向addedfile添加一些标志（ myCopiedFile.isCopied = true; ），然后再次添加文件（使用this.addFile(copiedFile) ，那么您需要确保缩略图不存在不会显示（通过检查是否已设置.isCopied标志），并且仅在未设置标志的情况下才调整其大小。

我同意评论中的@ robin-j观点：这是我将在服务器上执行的操作。

优点是：

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