如何在DropZone.js中上传较小的版本和原始图像？ [英] How to upload a smaller version and the original image in DropZone.js?

问题描述

我看了这个帖子：

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

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

The issue is that it seems this would resize the original image and that would be the only image uploaded to the server?

我想在我的图库中显示较小的版本以节省带宽和原始用户点击图片中的图片画廊看到它的全尺寸。

I want to display the smaller version in my gallery to save bandwidth and the original when a user clicks on an image in the gallery to see it full size.

我如何将较小的尺寸调整版和原版都上传到我的服务器？

How could I upload both the smaller resized version and the original to my server?

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

(The images will be stored in a google cloud bucket when sent to my server and then queried from the cloud bucket on the client from there on)

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

Here's my current code which uploads the image to my server.

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";
        });
    }

}

推荐答案

Dropzone并没有真正提供任何相关的东西。您可以尝试在 addedfile 事件中复制该文件，为其添加一些标志（ myCopiedFile.isCopied = true; ）并再次添加（使用 this.addFile（copiedFile）。然后你需要确保没有显示缩略图（通过检查是否 .isCopied flag已设置），只有在设置或不设置标志时才调整大小。

Dropzone doesn't really offer anything in regards to that. You can probably try to copy the file in the addedfile event, add some flag to it (myCopiedFile.isCopied = true;) and add it again (with this.addFile(copiedFile). Then you would need to make sure that the thumbnail isn't shown (by checking if the .isCopied flag is set), and only resize it, if the flag is set or not.

我同意这一点@ robin-j在评论中提到：这是我在服务器上做的事情。

I agree with the point @robin-j made in the comment: this is something I would do on the server.

优点是：

1. 用户需要上传更少的字节并节省带宽


2. 调整大小时可以获得更多控制权（可以优化jpeg算法以生成最小的文件大小）


3. 您不会冒用户对数据做一些有趣事情的风险（例如：他们可以编写一个简单的脚本，上传两个完全不同的图像作为缩略图和原始图像）

这篇关于如何在DropZone.js中上传较小的版本和原始图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！