加快网站从客户端浏览器到服务器的多图像上传速度

2022-08-30 20:07:03

我知道有办法将多个图像从浏览器上传到服务器,并且上传速度也基于服务器和网络的速度。这样做的标准方法:

点击网站中的上传按钮 ->选择要上传的图片 ->点击提交按钮将所有图片上传到服务器(提示“请等待”给用户) ->上传成功!

但就编码部分而言,我只是想知道是否有一种更快的方法可以将图像从客户端设备有效地上传到服务器?(使用Javascript和php)

目前,我正在做的是首先“剪切”客户端中的图像,然后将图像发送回服务器。但这非常慢,因为javascript需要时间来“减少”图像的大小。通过“剪切”,我的意思是使图像的宽度和高度更小。有没有更快的方法来做到这一点?

(一些javascript和php编码示例也会有所帮助。


答案 1

简短的回答:,Javascript不慢,PHP也不慢。

如果图像很大(几兆字节),则需要一些时间在javascript / php中裁剪/调整图像大小。没有办法避免它。

我相信您遇到了性能问题,因为:

  1. 您正在一次上传许多图像,并且..
  2. 其中一些很大(按兆字节)

在上传图像之前,请考虑对其进行优化。我建议您使用 kraken.io,您可以在不改变图像质量的情况下减小图像的大小(无损模式)。

此外,请考虑按块上传图像,这些块:

  1. 允许您跟踪上传进度
  2. AJAX 驱动

有许多块上传插件,这是其中之一:

https://github.com/blueimp/jQuery-File-Upload/wiki/Chunked-file-uploads

最后但并非最不重要的一点是,看看 kraken.io 本身,也许你会学到一些关于如何加速图像上传的东西。


答案 2

让我们尝试系统地面对这一挑战!您的任务就这么简单:尽可能快地将 X 字节从用户计算机发送到服务器 Y。假设一旦数据到达服务器,处理时间可以忽略不计 - 任何现代服务器都可以非常快速地处理大图像。

我们可以将可能的解决方案分为两类:

  1. 减少 X – 减少正在发送的数据量。在 JavaScript 中缩小用户端的图像,并将较小的图像发送到服务器 Y。

  2. 将服务器Y移近用户(令人惊讶的是没有人提到这一点?没有必要在全球范围内部署多台服务器,您只需使用CDN(其中许多服务器现在都是免费的或非常便宜)。即使CDN最终仍然会击中您的Web服务器,通常可以安全地假设CDN提供商拥有比普通用户更好的国际带宽。

额外注意事项:

  1. 做一些速度测试,您当前的服务器可能存在带宽问题,并且图像的上传速度比他们应该的要慢。只需将网站移动到另一家托管公司,您的图像上传速度可能会快一倍。

  2. 根据您的应用程序UX,您可以在选择文件后立即显示图像缩略图(在JS端完成),而文件仍在上传,从而提高用户感知的速度。您甚至可以允许用户在上传时在页面/网站中移动 - 如果您不阻止UI,则缓慢的上传就不会那么烦人。

一般来说,这是一个复杂的问题,没有一个单一的方法 - 这是一组步骤。如果某个用户有一个可怕的连接,那么其他什么都不重要!