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中上传较小的版本和原始图像？

1 个答案: