form表單中的enctype 屬性以及post請求里Content-Type方式

對於form表單中的enctype 屬性之前理解的一般，就知道是類似於一種編碼形式。后來公司做一個form表單提交數據的時候，重點是這個form表單里有文件上傳，而我又要用vue來模擬form表單提交，這個時候我就是需要設置表頭 。一直報錯，發現原來沒有向后台post請求是需要傳送“multipart/form-data”，

當action為post且Content-Type類型是multipart/form-data，瀏覽器會把整個表單以控件為單位分割，並為每個部分加上Content-Disposition(form-data或者file)

 以下是代碼

submitForm(event) {
            event.preventDefault();
            let formData = new FormData();
            formData.append('name', this.name);
            formData.append('age', this.age);
            formData.append('file', this.file);
 
            let config = {
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            }
 
            this.$http.post('/upload', formData, config).then(function (res) {
              if (res.status === 2000) {
                /*這里做處理*/
              }
            })
          }

 

后來參考網站：http://www.jb51.net/article/118051.htm

https://www.cnblogs.com/cjh1111/p/7017295.html

https://www.cnblogs.com/52fhy/p/5436673.html

定義和用法

form表單中enctype 屬性規定在發送到服務器之前應該如何對表單數據進行編碼。

enctype有三個屬性application/x-www-form-urlencoded，multipart/form-data，text/plain

默認地，表單數據會編碼為 "application/x-www-form-urlencoded"。就是說，在發送到服務器之前，所有字符都會進行編碼（空格轉換為 "+" 加號，特殊符號轉換為 ASCII HEX 值）。值：application/x-www-form-urlencoded  描述：在發送前編碼所有字符（默認），值：multipart/form-data  描述：

不對字符編碼。在使用包含文件上傳控件的表單時，必須使用該值。值：text/plain  描述：空格轉換為 "+" 加號，但不對特殊字符編碼。

https://www.cnblogs.com/cjh1111/p/7017295.html

可能平時不注重，開發項目的時候卻出現不少問題，這里我就說一下，如果表單提交和平時的有什么不一樣的時候，報錯八九不離十就是新的需求導致的，多思考，多找原因，一定要上網多查文檔資料，學習也是這樣，一直不斷的復習，不斷的查漏補缺！然后總結到位，慢慢成為專家