本地图片转base64_从一道面试题说起:GET 请求能传图片吗?
前言
忘了在哪里看到的这个题目,觉得挺有意思,来说下我的答案及思考过程。
首先,我们要知道的是,图片一般有两种传输方式:base64 和 file 对象。
base64 图片
图片的base64编码想必大家都见过:
base64 的本质是字符串,而 GET 请求的参数在 url 里面,所以直接把图的 base64 数据放到 url 里面,就可以实现 GET请求传图片。
input 输入框拿到的图是 file 对象,图片 file 对象转 base64 :
// img参数: file文件或者blobconst 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 对象
我们来看看这个场景:
选择图片,然后提交表单,能提交成功,但是接口收不到文件。请求的 url 会变成 http://localhost:8080/?logo=xxx.png ,但是不会携带图片数据。
正常情况,file 对象数据是放在 POST 请求的 body 里面,并且是 form-data 编码。
那么 GET 请求能否有 body 体呢?答案是可以有。
GET 和 POST 并没有本质上的区别,他们只是 HTTP 协议中两种请求方式,仅仅是报文格式不同(或者说规范不同)。
做过底层开发的同事可能比较熟悉,之前我们C语言的同事和我讲,我们的 HTTP 请求,他们收到是这样子的:
举个例子, 一个普通的 GET 请求,他们收到是这样的:
GET /test/?sex=man&name=zhangsan HTTP/1.1Host: http://localhost:8080Accept: application/json, text/plain, */*Accept-Encoding: gzip, deflateAccept-Language: zh-CN,zh;q=0.9Connection: Keep-Alive
POST 请求长这样:
POST /add HTTP/1.1Host: http://localhost:8080Content-Type: application/x-www-form-urlencodedContent-Length: 40Connection: Keep-Alivesex=man&name=Professional
同样,DELETE、PUT、PATCH 请求,也都是这样的报文。底层解析这个报文的时候,并不关心是什么请求,所以说 GET 请求也可以有 body 体,也可以传 form-data 数据。
有兴趣的可以拿 postman 试一下,看看 GET 请求传图片,接口能不能收到图片文件:
结尾
综上所述,GET 请求是可以传图片的,但是 GET 和 POST 的规范还是要遵守的,如果有后台让你这么做,锤他就行了!
本地图片转base64_从一道面试题说起:GET 请求能传图片吗?相关推荐
- 阿里二面:GET 请求能传图片吗?
欢迎关注方志朋的博客,回复"666"获面试宝典 从一道面试题说起:GET 请求能传图片吗? 「前言」 曾经遇到的面试题,觉得挺有意思,来说下我的答案及思考过程. 首先,我们要知道的 ...
- base64转图片_从一道面试题说起:GET 请求能传图片吗?
前言 忘了在哪里看到的这个题目,觉得挺有意思,来说下我的答案及思考过程. 首先,我们要知道的是,图片一般有两种传输方式:base64 和 file 对象. base64 图片 图片的base64编码想 ...
- GET 请求能传图片吗?
程序员的成长之路 互联网/程序员/技术/资料共享 关注 阅读本文大概需要 2.4 分钟. 作者:沉末 原文地址:https://juejin.im/post/6860253625030017031 前 ...
- 每日一道面试题(第7期)---Android补间动画与属性动画的区别
零零碎碎的东西总是记不长久,仅仅学习别人的文章也只是他人咀嚼后留下的残渣.无意中发现了这个每日一道面试题,想了想如果只是简单地去思考,那么不仅会收效甚微,甚至难一点的题目自己可能都懒得去想,坚持不下来 ...
- h5 bootstrap 小程序模板_一道面试题小程序与H5的区别
抛砖 此文是一道面试题,又不仅仅是一道面试题 面试题,在各个技术社区里都是一个永不落伍的话题,好像大多数人临面试前都会狂刷面试题,恨不得把所有面试题都看一遍,要说有用没,当然有用,因为大部分面试题确实 ...
- android 属性动画 补间动画,每日一道面试题(第7期)---Android补间动画与属性动画的区别...
零零碎碎的东西总是记不长久,仅仅学习别人的文章也只是他人咀嚼后留下的残渣.无意中发现了这个每日一道面试题,想了想如果只是简单地去思考,那么不仅会收效甚微,甚至难一点的题目自己可能都懒得去想,坚持不下来 ...
- 「一道面试题」输入URL到渲染全面梳理中-页面渲染篇
前置知识 此文是一道面试题,又不仅仅是一道面试题,不过这道题共分了三篇来说,嗯..可想而知 接上文,上文我们讲了网络通信的部分,详细请看「一道面试题」输入URL到渲染全面梳理上-网络通信篇, 那么该说 ...
- 从一道面试题谈谈一线大厂码农应该具备的基本能力
作者:Yura Shevchenko 来源:skypixel.com 关于一线码农的面试,我想说 求职面试在绝大部分人来说都是必不可少的,自己作为求职者也参与了不少面试(无论成功或者失败),作为技术面 ...
- 有的线程它死了,于是它变成一道面试题
来自:why不止技术 有些线程它活着,但它躺在池中碌碌无为: 有的线程它死了,于是它变成一道面试题. 这次的文章,要从一次阿里巴巴的面试说起. 我记得那天是周一,刚刚经历过周末过的放松,干劲十足的我正 ...
最新文章
- 区分真实模式的两个标准
- 机器学习实战读书笔记--朴素贝叶斯
- BSS段,数据段,代码段,堆内存和栈
- vue 源码学习(一) 目录结构和构建过程简介
- 改善代码可读性的5种方法
- CNN中全连接层是什么样的
- win10共享打印错误0x0000006_Win7打印机无法共享提示错误代码0x000006d9的解决方法...
- 你知道怎么用Python发送邮件吗?
- c++ 宏 stdin 和 STDIN_FILENO 区别
- multipartfile获取文件路径_已知路径,通用获取文件名、后缀、类型
- 机器人学导论学习笔记(持续更新)
- VB程序设计教程(第四版) 龚沛曾
- h3c交换机配置教程命令(新手配置交换机详细教程)
- 雷达原理---时频分析--1.基本概念
- linux权限管理的设计,Linux权限管理漫谈之用户切换
- three.js实现3D室内全景看房
- 【转帖】赤壁之战,曹操大败只因缺了Service Mesh
- 结束拒绝访问的进程 cmd下结束进程 强行结束进程
- dcs常用的冗余方式_DCS的冗余
- NodeJs模块化(KPD)
热门文章
- 计算机二级2021辅导书,2021该如何准备计算机二级考试?
- 我对模板模式和策略模式的理解
- [Swift]LeetCode781. 森林中的兔子 | Rabbits in Forest
- 使用docker中mysql镜像
- 官方一步解决各种Windows更新问题
- python 学习笔记十九 django深入学习四 cookie,session
- chapter16 计算机体系结构基础
- Linux 指令篇:档案目录管理--chown
- C#下把txt文件数据读进sql server中存储所遇到的乱码问题
- 几个不错的自己到的少的游戏站