本地图片转base64_从一道面试题说起:GET 请求能传图片吗?
前言
忘了在哪里看到的這個題目,覺得挺有意思,來說下我的答案及思考過程。
首先,我們要知道的是,圖片一般有兩種傳輸方式:base64 和 file 對象。
base64 圖片
圖片的base64編碼想必大家都見過:
base64 的本質(zhì)是字符串,而 GET 請求的參數(shù)在 url 里面,所以直接把圖的 base64 數(shù)據(jù)放到 url 里面,就可以實現(xiàn) GET請求傳圖片。
input 輸入框拿到的圖是 file 對象,圖片 file 對象轉(zhuǎn) base64 :
// img參數(shù): 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 左右,根據(jù) base64 的編碼原理,base64 圖片大小比原文件大小大 1/3,所以說 base64 只能傳一些非常小的小圖,大圖的 base64 太長會被截斷。
但其實這個長度限制是瀏覽器給的,而不是 GET 請求本身,也就說,在服務(wù)端,GET 請求長度理論上無限長,也就是可以傳任意大小的圖片。
file 對象
我們來看看這個場景:
選擇圖片,然后提交表單,能提交成功,但是接口收不到文件。請求的 url 會變成 http://localhost:8080/?logo=xxx.png ,但是不會攜帶圖片數(shù)據(jù)。
正常情況,file 對象數(shù)據(jù)是放在 POST 請求的 body 里面,并且是 form-data 編碼。
那么 GET 請求能否有 body 體呢?答案是可以有。
GET 和 POST 并沒有本質(zhì)上的區(qū)別,他們只是 HTTP 協(xié)議中兩種請求方式,僅僅是報文格式不同(或者說規(guī)范不同)。
做過底層開發(fā)的同事可能比較熟悉,之前我們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-AlivePOST 請求長這樣:
POST /add HTTP/1.1Host: http://localhost:8080Content-Type: application/x-www-form-urlencodedContent-Length: 40Connection: Keep-Alivesex=man&name=Professional同樣,DELETE、PUT、PATCH 請求,也都是這樣的報文。底層解析這個報文的時候,并不關(guān)心是什么請求,所以說 GET 請求也可以有 body 體,也可以傳 form-data 數(shù)據(jù)。
有興趣的可以拿 postman 試一下,看看 GET 請求傳圖片,接口能不能收到圖片文件:
結(jié)尾
綜上所述,GET 請求是可以傳圖片的,但是 GET 和 POST 的規(guī)范還是要遵守的,如果有后臺讓你這么做,錘他就行了!
總結(jié)
以上是生活随笔為你收集整理的本地图片转base64_从一道面试题说起:GET 请求能传图片吗?的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 名词用作动词举例_日语动词修饰名词的形式
- 下一篇: hbase可视化工具_做数据可视化,三大