只用 url 识别 image/gif 大小

Question

我希望用户在我的输入中粘贴 link gif 或图像。

例如，用户粘贴此 link：https://media.giphy.com/media/yYSSBtDgbbRzq/giphy.gif

我希望我的应用程序能够识别此 gif 文件是否超过 5MB，而无需下载它。这可能吗？

我在前端使用 Reactjs，在后端使用 nodejs+express

Answer 1

HTTP 协议提供了 HEAD 方法。根据维基百科的 HTTP-article，它与 GET 方法类似，只是它 returns 仅 HTTP-header 而不是数据。

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

我不知道在JS中是如何表述的，但是Linux命令行证明原理是可行的。如果我输入：

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

我从服务器收到包含行

的响应

content-length: 2156106

这是你想要的信息。

Answer 2

您可以使用 <input type="file" class="js-file-upload" /> 这将使用户能够上传下载的文件或 copy/paste .gif 文件的 link。

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

这是一个简单的例子

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
}

Answer 3

您只需询问 headers 即可获得内容长度。这是此答案的基于获取的方法：

Ajax - Get size of file before downloading

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

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

   return size
}

只用 url 识别 image/gif 大小

Recognize image/gif size with only url

javascript

image

gif

node.js

reactjs