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

Question

我看了这个帖子：

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

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

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

如何将缩小后的版本和原始版本同时上传到我的服务器？

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

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

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 的观点：这是我会在服务器上做的事情。

优点是：

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

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

How to upload a smaller version and the original image in DropZone.js?

javascript

upload

image

node.js

dropzone.js