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請(qǐng)求 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); }); }
前端請(qǐng)求請(qǐng)求后,我們在瀏覽器的Network看是否有參數(shù)。
確保Network里有Form Data參數(shù) ,如果是Query String Parameters參數(shù)或其它,則有可能不成功。
NodeJS后臺(tái)接收
推薦使用multiparty模塊接收參數(shù)。
// 這里我配置了router,直接用app.post沒有影響 router.post("/upload", (req, res) => { let obj = {}; // 接收參數(shù) let form = new multiparty.Form(); // 設(shè)置文件存儲(chǔ)路徑 form.uploadDir = "./avatar"; // 設(shè)置單文件大小設(shè)置 form.maxFilesSize = 2 * 1024 * 1024; // 上傳完后處理 form.parse(req, function (err, fields, files) { console.log(fields); console.log(files); } }
提示:
如果后臺(tái)使用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)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue-vuex中使用commit提交mutation來修改state的方法詳解
今天小編就為大家分享一篇vue-vuex中使用commit提交mutation來修改state的方法詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09在antd中setFieldsValue和defaultVal的用法
這篇文章主要介紹了在antd中setFieldsValue和defaultVal的用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10一文詳解Vue3中使用ref獲取元素節(jié)點(diǎn)
這篇文章主要介紹了一文詳解Vue3中使用ref獲取元素節(jié)點(diǎn),本文介紹在vue3的setup中使用composition?API獲取元素節(jié)點(diǎn)的幾種方法,需要的朋友可以參考一下2022-07-07vue組件中iview的modal組件爬坑問題之modal的顯示與否應(yīng)該是使用v-show
這篇文章主要介紹了vue組件中iview的modal組件爬坑問題之modal的顯示與否應(yīng)該是使用v-show,本文通過實(shí)例圖文相結(jié)合的形式給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04解決antd日期選擇組件,添加value就無法點(diǎn)擊下一年和下一月問題
這篇文章主要介紹了解決antd日期選擇組件,添加value就無法點(diǎn)擊下一年和下一月問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10vue使用 better-scroll的參數(shù)和方法詳解
這篇文章主要介紹了vue使用 better-scroll的參數(shù)和方法詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01在nginx上部署vue項(xiàng)目(history模式)的方法
vue-router 默認(rèn)是hash模式,使用url的hash來模擬一個(gè)完整的url,當(dāng)url改變的時(shí)候,頁面不會(huì)重新加載。這篇文章主要介紹了在nginx上部署vue項(xiàng)目(history模式),需要的朋友可以參考下2017-12-12