仅通过网址识别图像/gif 大小

Question

我希望用户在我的输入中粘贴 gif 或图像的链接。例如，用户粘贴此链接：https://media.giphy.com/media/yYSSBtDgbbRzq/giphy.gif我希望我的应用程序识别此gif是否超过5MB，而无需下载它。这可能吗？我正在将 Reactjs 用于前端，将节点 js+ express 用于后端

Answer 1

您可以通过仅请求标题来获取内容长度。这是一个基于获取的方法，在这里这个答案：

Ajax - 在下载之前获取文件的大小

const getFileSize = async (url) => {

   const response = await fetch(url, {method: 'HEAD'})

   const size = response.headers.get('content-length')

   return size

}

Answer 2

该协议提供了该方法。根据维基百科的HTTP文章，它就像方法一样，只是它只返回HTTP标头而不是数据。HTTPHEADGET

这可能正是您所需要的：发出 AJAX 头请求而不是 AJAX-GET 请求，并从结果中解析图像的预期大小。

我不知道如何在JS中表述这一点，但Linux命令行证明了这个原理是有效的。如果我键入：

curl --head https://media.giphy.com/media/yYSSBtDgbbRzq/giphy.gif

我从包含该行的服务器收到响应

content-length: 2156106

这是你想要的信息。

Answer 3

您可以使用它使用户能够上传下载的文件或复制/粘贴.gif文件的链接。<input type="file" class="js-file-upload" />

之后，从JS端，您将需要检查该文件的大小（如果他们粘贴直接链接，它将自动上传到用户PC的临时文件中）。

下面是一个简单的示例

const file = document.querySelector('.js-file-upload').files[0];

const fileSize = (file.size/1024/1024).toFixed(2);

const allowedSize = 5;

if (fileSize > allowedSize) {

     //print error

}