Javascript HTML5文件上传速度慢？

我比较了版本1：标准html文件上传和版本2：html5文件API和ajax上传。事实证明，html5文件API和ajax上传比旧的html文件上传慢得多

为什么第2版的上传速度比第1版慢得多？

如何加快版本2中的上传速度？

版本1:

HTML

服务器代码Grails2.2.4：

CommonsMultipartFile file = (CommonsMultipartFile) request.getFile('image')
byte [] imageBytes = file.getBytes()

版本2:

HTML

以下是我测量的结果：

我上传了一张jpg图片，大小为7.5MB，有版本1和版本2，还有pinterest和flickr。提交表单时，在客户端处理完图像后，我启动了version1和version2的计时器

注意：时间中不包括与画布相关的代码。之后我开始测量

结果是：

• 版本1:1.16分钟
• 版本2:3.43分钟
• pinterest:1.09分钟
• flickr:1.11分钟

---

版本2 Base64对toDataUrl（）中的数据进行编码。这将是一个更大的数据量发送比版本1，这只是发送原始二进制。要查看这一点，请使用Fiddler观察HTTP流量并比较两者。Statistics选项卡将显示“Bytes Sent”（已发送字节），我认为使用版本2的方法会更好。测量时，请注意计时器的启动和停止位置。我知道您在评论中说您排除了画布工作，但除非您从之后的toDataUrl（）到完全激发进行测量，否则这不是网络时间的“公平”比较。简言之，速度较慢，因为a）要发送更多数据，b）toDataUrl必须将图像从画布复制到表单

至于如何使它更快，这是一个有点棘手的做，并保持您的功能。你在客户机上做了更多的工作，所以速度必然会变慢。好吧，canvas没有办法将数据作为原始字节（不是base64）流式传输到服务器，这正是您想要的。jQuery文件上传可能至少有助于使其更加用户友好，或者可能有一些我不清楚的魔力，可以通过base64以外的方式发送数据：

---

根据您在画布中执行的操作和您的服务器资源，在服务器上执行图像处理可能更有意义。这无疑会加快上传速度，但会以牺牲服务器CPU和内存为代价

你怎么知道它比较慢？慢了多少？包括有关您的指标的更多信息。什么比较慢（上传，或者整个处理过程，包括画布相关代码）？@RayNicholus我更新了我问题中的结果。我在画布处理后开始测量。因此，与画布相关的代码不包括在时间中。问题在于您的计算，或者您没有在此处显示所有代码。或者，还有其他一些环境问题，可能是带宽或与服务器相关。@RayNicholus我在上传时使用了相同的环境。我更新了我的服务器代码。有没有办法压缩base64？“任何可以完成的事情，最终都将在javascript中完成”；）不过，我不确定我是否会推荐这种方法作为第一种解决方案—在开始发送之前，您需要花费时间写入base64，然后再进行压缩。

$("#image").change(function() {

  $("#imageUploaderForm").ajaxForm({
    complete: function(response){
        console.log("upload complete");
    }
  });
  $("#imageUploaderForm").submit();

});

CommonsMultipartFile file = (CommonsMultipartFile) request.getFile('image')
byte [] imageBytes = file.getBytes()

<g:form method="post" accept-charset="utf-8" enctype="multipart/form-data"  
         name="imageUploaderForm" id="imageUploaderForm" url="someurl"></form>

<input id="UploadFileInput" class="UploadFileInput" type="file" name="image" accept="image/jpeg, image/gif, image/png" />

var fileReaderOpts = {
        readAsDefault: 'BinaryString',
        on: {
            load: function(event, file) {

                var $img = $('<img>'), 
                    imgWidth, imgHeight;

                $img.load(function() {

                    // Create the canvas.
                    $originalCanvas = $('<canvas data-caman-hidpi-disabled>');
                    var originalContext = $originalCanvas[0].getContext('2d');  

                    // Save image to canvas
                    $originalCanvas[0].width = this.width;
                    $originalCanvas[0].height = this.height;
                    originalContext.drawImage(this, 0, 0);

                    // some image modification on the canvas

                    // send image to server

                    var imageUrl = $originalCanvas[0].toDataURL();

                    $("#imageUploaderForm").ajaxForm({
                        data: { 
                            img : imageUrl,
                        },
                        complete: function(response){
                                console.log("upload complete");
                        } 
                    }); 

                    $("#imageUploaderForm").submit();



                }); // end $img.load

                // Set the src of the img, which will trigger the load event when done
                $img.attr('src', event.target.result);


            },// end load           
            beforestart: function(file) {
                // Accept only images. Returning false will reject the file.
                return /^image/.test(file.type);
            }
        }
};


// Bind the fileReader plugin the upload input and the drop area.
$("UploadFileInput").fileReaderJS(fileReaderOpts);

String imgBase64 = params.image
imgBase64 = imgBase64.trim().replaceFirst("data:image/png;base64,", "")
byte[] imageBytes = Base64.decode(imgBase64.getBytes())