Fetch上傳文件（不須要設置headers）

時間 2019-11-24

標籤 fetch 上傳文件須要設置 headers 简体版

原文原文鏈接

Fetch上傳文件（不須要設置headers）

最近在項目中有一個上傳文件的需求，而後我使用了fetch進行文件上傳，代碼以下：javascript

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>測試fetch上傳文件</title>
  </head>
<body>
 <input type="file" id="files" onchange="upload(event)"/>
 <script type="text/javascript">
   function upload(event) {
     const formData = new FormData();
     formData.append('file', event.target.files[0]);
     fetch('/upload', {
       method: 'post',
       headers: {
          'Content-Type': 'multipart/form-data',
        },
       body: formData,
       }).then(response => response.json())
       .then((data) => {
            console.log(data);
       });
      }
 </script>
</body>
</html>
複製代碼

運行結果：html

code: 9999
data: []
msg: "文件不存在"
time: 1546948790.707762
複製代碼

咱們查看一下Request Headerjava

Content-Type: multipart/form-data
複製代碼

能夠看出這個地方的content-Type已經設置爲了multipart/form-data 可是爲何會報文件不存在呢？再看看咱們的formDatajson

------WebKitFormBoundary8RVZAoLHNvQ5pKqL
Content-Disposition: form-data; name="file"; filename="20180717133748_52656.xlsx"
Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet


------WebKitFormBoundary8RVZAoLHNvQ5pKqL--
複製代碼

這裏能夠明顯看出這個文件是存在'------WebKitFormBoundary8RVZAoLHNvQ5pKqL--'做爲分隔的，那這個地方就上下沒有達到一致。bash

boundary的重要性

在rfc1867協議中規定，咱們在指定content-type爲multipart/form-data時，代表咱們須要傳遞的是多媒體內容，咱們須要指定boundary【分隔符】來分割當上傳多個文件/圖片。boundary是隨機生成的數字和字母的組合。微信

按照上面的寫法能夠看出，Request Header裏面的content-type中只是設置了multipart/form-data，而沒有隨機生成的boundary值，app

使用fetch上傳文件遇到的坑

咱們都知道在上傳多媒體文件的時候，咱們是須要指定Content-Type的，可是通過小編的測試，把代碼經過以下修改：post

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>測試fetch上傳文件</title>
  </head>
<body>
 <input type="file" id="files" onchange="upload(event)"/>
 <script type="text/javascript">
   function upload(event) {
     const formData = new FormData();
     formData.append('file', event.target.files[0]);
     fetch('/upload', {
       method: 'post',
       body: formData,
       }).then(response => response.json())
       .then((data) => {
            console.log(data);
       });
      }
 </script>
</body>
</html>
複製代碼

也就是把header去掉，不指定Content-Type； Request Header中的Content-Type就默認設置爲了multipart/form-data；測試

Content-Type: multipart/form-data; boundary=----WebKitFormBoundarythLhwaT87w2PJrYz
複製代碼

再看看formDatafetch

------WebKitFormBoundarythLhwaT87w2PJrYz
Content-Disposition: form-data; name="file"; filename="20180717133748_52656.xlsx"
Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet


------WebKitFormBoundarythLhwaT87w2PJrYz--
複製代碼

能夠看出formDat裏的數據boundary和Request Header裏的boundary是一致的。運行代碼的結果結果就是能夠正常的上傳文件了，爲何呢？在使用fetch上傳文件的時候爲何不須要設置Content-Type，在咱們進行上傳多媒體文件的時候就默認設置成了multipart/form-data。

爲何Fetch上傳文件時不須要設置headers。若是你知道緣由能夠留言喔。期待你的精彩答覆。

歡迎關注微信公衆號