在做前後端分離的項目時、我們就不能使用form表單來送出資料或者上傳檔案了，那麼就隻能通過vue的axios來送出資料，如果資料中有檔案類型的資料，就需要将所有需要上傳的資料添加到FormData對象中，以FormData形式用axios上傳，同時要設定headers中的content-type為multipart/form-data。
vue
<template>
<div>
<div>
<input class="input" type="text" placeholder="使用者名" v-model="username">
<input class="input" type="password" placeholder="密碼" v-model="password">
<input type="file" name="file" accept=".jpg, .jpeg, .png" @change="changeImage">
<input class="btn" type="button" @click="register" value="注 冊"><br>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
file: null,
username:'',
password:'',
};
},
methods: {
//擷取檔案
changeImage (e) {
var file = e.target.files[0]
this.file = file
},
//注冊
register() {
let formData= new FormData();
formData.append('username', this.username);
formData.append('password', this.password1);
formData.append("avatar", this.file);
console.log(formData.get('avatar'))
//請求頭
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
//axios的post請求
this.$axios.post('/reg',formData,config).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
});
}
}
};
</script>
nodejs
const multer = require('multer');//上傳檔案
//上傳配置
let storage = multer.diskStorage({
destination: function (req, file, cb) {
// 指定路徑儲存
cb(null, path.join(__dirname,'./', 'public', 'img', 'avatar'))
},
filename: function (req, file, cb) {
// 将儲存檔案名設定為 檔案原始名 + 時間戳
var suffix = file.originalname.split('.')
cb(null, file.fieldname + '-' + Date.now() + '.' + suffix[suffix.length - 1]);
}
})
// 建立中間件
let upload = multer({storage: storage});
app.post('/reg', upload.single('avatar') , function(req, res) {
let username = req.body.username
let password = req.body.password
let imgname = req.file.filename;
})
到這裡，按照理論來說是完全沒有問題的。但是偏偏提示服務端報錯，錯誤原因： Multipart沒有找到Boundary
首先要知道boundry是一個浏覽器随機生成的一組數，用來分隔FormDatad的資料，看一下下面正确的請求頭就會發現我們的請求頭中沒有boundry。為什麼會出現這個問題？
弄了半天才知道，這是使用Express+multer中間件上傳檔案的時候出現的問題。multer 伺服器會自動識别添加 Content-Type，重複設定 Content-Type: mutipart/form-data 就會覆寫原有的， 造成非預期的錯誤。
然後我就把請求頭的Content-Type: mutipart/form-data設定去掉了。這次就索性沒有任何資料送出到服務端了，請求頭如下，Content-Type也變成了application/json預設類型。這條路根本走不通，上傳檔案Content-Type必須要設定為 mutipart/form-data。但是又不希望它丢失後面的boundary。
通過強大的百度，找到了造成這個問題的原因。問題的關鍵在axios身上，axios對我們的request做了一個攔截然後重新傳回，不設定Content-Type，會預設application/json類型，這個時候我們的formData會被變為一個Object。如果自己設定Content-Type為mutipart/form-data又會丢失boundary。但是我們知道了原因在哪，就比較好解決問題。
解決方法：
1、手動設定boundary，不過這種方法改動了headers，是以不太好。
let config = {
headers: {
'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()
}
}
2、因為axios攔截了請求，對請求的資料做了一些處理，而我們的FormData傳輸檔案不需要任何的處理。是以可以執行個體一個axios上過載一個方法，躲過axios的攔截。
let myAxios = axios.create({
baseUrl:'http://localhost:8080/',
timeout:1000,
headers:{"Content-Type":"multipart/form-data"}
});
Vue.prototype.$myAxios = myAxios;
this.$myAxios.post('/reg',formData).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
3、在axios第三個參數請求的配置裡添加一個transformRequest方法、覆寫掉原本的方法。transformRequest 允許在向伺服器發送前，修改請求資料，但是我們不需要修改資料。
let config = {
headers: {
'Content-Type': 'multipart/form-data'
},
transformRequest: [function (data) {
return data
}]
}