GET 请求能传图片吗？实战揭秘

代码小侦探

于 2025-01-21 13:13:47 发布

阅读量1k

点赞数 22

文章标签： http

本文链接：https://blog.csdn.net/m0_37643701/article/details/145281644

版权

我经常会被问到一些看似不合常规的技术问题，比如：“GET 请求能传图片吗？”今天，我就来实战揭秘这个问题，带大家一探究竟。

HTTP GET 请求与图片传输

在Web开发中，图片通常有两种传输方式：base64编码和file对象。那么，这两种方式在GET请求中表现如何呢？

1. base64 编码图片

base64编码是一种将二进制数据转换为ASCII字符串的方法。图片的base64编码大家可能都见过，它看起来像这样一串长长的字符：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

在这里插入图片描述

原理与实践

本质：base64编码的本质是字符串，而GET请求的参数是放在URL里面的。因此，理论上我们可以直接把图片的base64数据放到URL里面，实现GET请求传图片。

转换示例：假设我们有一个input输入框，用户选择了一张图片，我们如何将这张图片转换为base64编码呢？以下是一个简单的JavaScript示例：

<input type="file" id="fileInput" />
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = function(e) {
        const base64String = e.target.result;
        console.log(base64String); // 这里就是图片的base64编码
    };
    reader.readAsDataURL(file);
});
</script>

问题：然而，GET请求的URL长度是有限制的。不同的浏览器长度限制不一样，最长的大概是10KB左右。根据base64的编码原理，base64图片大小比原文件大小大1/3。因此，base64只能传一些非常小的小图，大图的base64太长会被截断。
服务端视角：其实这个长度限制是浏览器给的，而不是GET请求本身。在服务端，GET请求长度理论上可以无限长，也就是可以传任意大小的图片。但在实际应用中，我们还是要考虑浏览器的限制。

2. file 对象

那么，如果我们直接使用file对象呢？来看看下面的场景：

<form action="http://localhost:8080/" method="get">
    <input type="file" name="logo">
    <input type="submit">
</form>

当你选择一张图片并提交表单时，你会发现表单能提交成功，但接口收不到文件数据。请求的URL会变成http://localhost:8080/?logo=xxx.png，但并不会携带图片数据。

原因：正常情况下，file对象数据是放在POST请求的body里面，并且是form-data编码。那么，GET请求能否有body体呢？

GET 请求的 body 体

答案是：可以有！

本质无区别：GET和POST并没有本质上的区别，他们只是HTTP协议中的两种请求方式，仅仅是报文格式不同（或者说规范不同）。
报文格式：一个普通的GET请求报文可能看起来像这样：

在这里插入图片描述

GET /test/?sex=man&name=zhangsan HTTP/1.1
Host: http://localhost:8080
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9
Connection: Keep-Alive

而一个POST请求报文可能看起来像这样：

POST /add HTTP/1.1
Host: http://localhost:8080
Content-Type: application/x-www-form-urlencoded
Content-Length: 40
Connection: Keep-Alive

sex=man&name=Professional

同样，DELETE、PUT、PATCH请求也都是这样的报文格式。底层解析这个报文的时候，并不关心是什么请求。因此，GET请求也可以有body体，也可以传form-data数据。

实践验证：有兴趣的朋友可以用Postman试一下，看看GET请求传图片，接口能不能收到图片文件。在Postman中，你可以设置一个GET请求，并在Body部分选择form-data，然后添加一个文件字段，上传一张图片。你会发现，尽管这不符合常规的GET请求使用规范，但服务端确实可以接收到这个文件。
SpringMVC接收：如果你在后端使用SpringMVC，你可能需要使用@RequestBody（实际上对于文件上传，更常用的是MultipartFile类型，但这里是为了说明GET请求也可以有body）来接收请求体中的数据。不过，对于文件上传，还是建议使用POST请求和MultipartFile类型。