GET 請求能傳圖片嗎？

作者：沉末

https://juejin.im/post/6860253625030017031

前言

曾經遇到的面試題，覺得挺有意思，來說下我的答案及思考過程。

首先，我們要知道的是，圖片一般有兩種傳輸方式：base64 和 file對象。

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" >
    <input type="submit">
</form>

選擇圖片，然後提交表單，能提交成功，但是接口收不到文件。請求的 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.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 請求傳圖片，接口能不能收到圖片文件：

結尾

綜上所述，GET 請求是可以傳圖片的，但是 GET 和 POST 的規範還是要遵守的，如果有後臺讓你這麼做，錘他就行了!

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/p2PgvJlPOHr4JRtPaffLpw

base64 圖片

file 對象

結尾

猜你喜歡