Vue發(fā)送Formdata數(shù)據(jù)及NodeJS接收方式
Vue發(fā)送Formdata數(shù)據(jù)
參數(shù)blob是通過this.cropper.getCroppedCanvas().toBlob(blob => { });獲取到的。
具體使用方法,參考此鏈接地址
// 這里我使用的是cropperjs插件,裁剪圖片成功執(zhí)行此方法
crop(blob) {
const formData = new FormData();
let uid = this.$store.getters.getUid;
formData.append("croppedImg", blob);
formData.append("id", uid);
// 這里使用的是Axios請求
this.$http
.post("upload", formData)
.then(res => {
let data = res.data;
if (data.code == 1) {
let uploadAvatar = this.$store.getters.getUploadAvatar;
this.$store.dispatch("onSaveUploadAvatar", uploadAvatar + 1);
this.$Modal.success({
title: "提示",
content: data.msg
});
} else {
this.$Modal.warning({
title: "提示",
content: data.msg
});
}
})
.catch(error => {
console.log(error);
});
}前端請求請求后,我們在瀏覽器的Network看是否有參數(shù)。
確保Network里有Form Data參數(shù) ,如果是Query String Parameters參數(shù)或其它,則有可能不成功。

NodeJS后臺接收
推薦使用multiparty模塊接收參數(shù)。
// 這里我配置了router,直接用app.post沒有影響
router.post("/upload", (req, res) => {
let obj = {};
// 接收參數(shù)
let form = new multiparty.Form();
// 設(shè)置文件存儲路徑
form.uploadDir = "./avatar";
// 設(shè)置單文件大小設(shè)置
form.maxFilesSize = 2 * 1024 * 1024;
// 上傳完后處理
form.parse(req, function (err, fields, files) {
console.log(fields);
console.log(files);
}
}提示:
如果后臺使用connect-multiparty模塊只能接收jQuery傳遞的formdata參數(shù),當(dāng)然jQuery要設(shè)置了屬性:
processData: false。// 不處理數(shù)據(jù)contentType: false。// 不設(shè)置內(nèi)容類型- 參考地址
不能接收Axios傳遞的參數(shù),因此推薦使用multiparty模塊。

查看FormData里的值
const formData = new FormData();
formData.append("basePath", "fos/attach/");
formData.append("file", e.file);1、遍歷
for (var [a, b] of formData.entries()) {
? console.log(a, b, '--------------');
}2、get
formdata.get(key)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue-vuex中使用commit提交mutation來修改state的方法詳解
今天小編就為大家分享一篇vue-vuex中使用commit提交mutation來修改state的方法詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在antd中setFieldsValue和defaultVal的用法
這篇文章主要介紹了在antd中setFieldsValue和defaultVal的用法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
一文詳解Vue3中使用ref獲取元素節(jié)點(diǎn)
這篇文章主要介紹了一文詳解Vue3中使用ref獲取元素節(jié)點(diǎn),本文介紹在vue3的setup中使用composition?API獲取元素節(jié)點(diǎn)的幾種方法,需要的朋友可以參考一下2022-07-07
vue組件中iview的modal組件爬坑問題之modal的顯示與否應(yīng)該是使用v-show
這篇文章主要介紹了vue組件中iview的modal組件爬坑問題之modal的顯示與否應(yīng)該是使用v-show,本文通過實(shí)例圖文相結(jié)合的形式給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
解決antd日期選擇組件,添加value就無法點(diǎn)擊下一年和下一月問題
這篇文章主要介紹了解決antd日期選擇組件,添加value就無法點(diǎn)擊下一年和下一月問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue使用 better-scroll的參數(shù)和方法詳解
這篇文章主要介紹了vue使用 better-scroll的參數(shù)和方法詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-01-01

