专栏首页老男孩成长之路从一道面试题说起:GET 请求能传图片吗?

从一道面试题说起:GET 请求能传图片吗?

前言

忘了在哪里看到的这个题目,觉得挺有意思,来说下我的答案及思考过程。

首先,我们要知道的是,图片一般有两种传输方式:base64file 对象。

base64 图片

图片的base64编码想必大家都见过:

base64 的本质是字符串,而 GET 请求的参数在 url 里面,所以直接把图的 base64 数据放到 url 里面,就可以实现 GET 请求传图片。

input 输入框拿到的图是 file 对象,图片 file 对象转 base64

// img参数: file文件或者blob
const getBase64 = img => {
  return new Promise((resolve,reject) => {
    const reader = new FileReader();
    reader.onload = e => {
      resolve(e.target.result);
    };
    reader.onerror = e => reject(e);
    reader.readAsDataURL(img);
  })
}

问题来了,GET 请求的 url 长度是有限制的,不同的浏览器长度限制不一样,最长的大概是 10k 左右,根据 base64 的编码原理,base64 图片大小比原文件大小大 1/3,所以说 base64 只能传一些非常小的小图,大图的 base64 太长会被截断。

但其实这个长度限制是浏览器给的,而不是 GET 请求本身,也就说,在服务端,GET 请求长度理论上无限长,也就是可以传任意大小的图片。

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 体呢?答案是可以有。

GETPOST 并没有本质上的区别,他们只是 HTTP 协议中两种请求方式,仅仅是报文格式不同(或者说规范不同)。

做过底层开发的同事可能比较熟悉,之前我们C语言的同事和我讲,我们的 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 

同样,DELETEPUTPATCH 请求,也都是这样的报文。底层解析这个报文的时候,并不关心是什么请求,所以说 GET 请求也可以有 body 体,也可以传 form-data 数据。

有兴趣的可以拿 postman 试一下,看看 GET 请求传图片,接口能不能收到图片文件:

结尾

综上所述,GET 请求是可以传图片的,但是 GETPOST 的规范还是要遵守的,如果有后台让你这么做,锤他就行了!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 可能会搞砸你的面试:你知道一个TCP连接上能发起多少个HTTP请求吗?

    本文由原作者松若章原创发布,作者主页:zhihu.com/people/hrsonion/posts,感谢原作者的无私分享。

    JackJiang
  • why哥这里有一道Dubbo高频面试题,请查收。

    大家好,我是 why,欢迎来到我连续周更优质原创文章的第 64 篇。老规矩,先荒腔走板聊聊其他的。

    why技术
  • 一些经典的Http面试题

    还记得这道经典的面试题目吗?从 URL 在浏览器被被输入到页面展现的过程中发生了什么?

    程序IT圈
  • 99%的人都理解错了HTTP中GET与POST的区别

    京东技术
  • 看我如何发现Twitter任意账户发送推文漏洞并获得7560美元赏金

    在参与Twitter漏洞赏金项目的过程中,我通过一些安全测试发现了Twitter存在的重大漏洞:攻击者不需要获取他人账户权限,就能以任意账户发布推文。我于201...

    FB客服
  • 一个TCP连接可以发送多少个HTTP请求?

    一道经典的面试题是从URL在浏览器被输入到页面展现的过程中发生了什么?大多数回答都是请求响应之后DOM是怎么被构建、被绘制出来。

    Clearlove
  • Elasticsearch Top 51 重中之重面试题及答案

    问题列表和答案来自国外博客(原文答案不准确,有错误),为避免误导,我对每个问题做了属于自己的理解和解答。

    铭毅天下
  • Python3网络爬虫快速入门实战解析

    强烈建议:请在电脑的陪同下,阅读本文。本文以实战为主,阅读过程如稍有不适,还望多加练习。

    圆方圆PYTHON学院
  • Python3网络爬虫快速入门实战解析

    Python版本: Python3.x 运行平台: Windows IDE: Sublime text3 一 前言 强烈建议:请在电脑的陪同下,阅读...

    Jack_Cui
  • 小姐姐,我有一份tcp、http面试指南你要吗?

    作为一个学通信出身的前端,说道http、tcp什么的,算是到了我的领域了。(我会告诉你我上课净睡觉了,啥也没学到吗?)这次给大家讲讲http,提高水平、丰富知识...

    Nealyang
  • 接口测试基础知识

    外部接口:例如公司的项目涉及到支付这块,微信支付,支付宝支付,银联支付,不会是自己公司开发的接口,因为用户的数据在阿里云和腾讯那边,想动支付宝或者是微信中用户钱...

    清菡
  • Python3 网络爬虫(四):视频下载,那些事儿!

    「you-get」支持各大视频网站的视频下载,国内外加起来近 80 家。像国内的爱奇艺、腾讯视频、抖音、快手、B站、A站,国外的 Youtube、Twitter...

    Jack_Cui
  • 安卓工程师:秋招21家公司的面试真题总结

    之前一直混迹于牛客,现在也反馈一波给牛油们。下面是秋招的面试经历具体内容。 拼多多 学霸提前批Android研发工程师 offer 笔试 基于给定接口实现Ima...

    牛客网
  • 点击一张图片背后的风险

    * 本文原创作者:mscb,本文属FreeBuf原创奖励计划,未经许可禁止转载 你相信吗?仅仅是因为你点击了某个你一只在访问网站里的一张图片,导致你的用...

    FB客服
  • C#进阶系列——WebApi 接口参数不再困惑:传参详解上

    前言:还记得刚使用WebApi那会儿,被它的传参机制折腾了好久,查阅了半天资料。如今,使用WebApi也有段时间了,今天就记录下API接口传参的一些方式方法,算...

    逸鹏
  • 【AI白身境】学深度学习你不得不知的爬虫基础

    在介绍爬虫之前我们先说下网页基础,理解前端网页的一些基础知识对于学习爬虫是很有必要的,它是爬虫的基础之一。

    用户1508658
  • 2--安卓网络编程之http协议简介+小案例引入

    你也可以请求一下百度的服务器,可以看出是返回了一个Html的源码,浏览器便是解析这份源码,渲染成视图展现出来的。

    张风捷特烈
  • 喜马拉雅、ctrip、b站、流利说、蜻蜓FM、爱回收前端面试经历

    我的回答是[1,2,6,4,3,5]。这道题目主要考对JS宏任务和微任务的理解程度,JS的事件循环中每个宏任务称为一个Tick(标记),在每个标记的末尾会追加一...

    前端迷
  • 听我讲完GET、POST原理,面试官给我倒了杯卡布奇诺

    有一次面试的时候也被问到了这个问题,下面我会以面试的形式呈现给大家,那么就让我把大家拉到面试的现场吧!

    狼王编程

扫码关注云+社区

领取腾讯云代金券