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(); // 設置文件存儲路徑 form.uploadDir = "./avatar"; // 設置單文件大小設置 form.maxFilesSize = 2 * 1024 * 1024; // 上傳完后處理 form.parse(req, function (err, fields, files) { console.log(fields); console.log(files); } }
提示:
如果后臺使用connect-multiparty模塊只能接收jQuery傳遞的formdata參數(shù),當然jQuery要設置了屬性:
processData: false
。// 不處理數(shù)據(jù)contentType: false
。// 不設置內容類型- 參考地址
不能接收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)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue-vuex中使用commit提交mutation來修改state的方法詳解
今天小編就為大家分享一篇vue-vuex中使用commit提交mutation來修改state的方法詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09在antd中setFieldsValue和defaultVal的用法
這篇文章主要介紹了在antd中setFieldsValue和defaultVal的用法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10vue組件中iview的modal組件爬坑問題之modal的顯示與否應該是使用v-show
這篇文章主要介紹了vue組件中iview的modal組件爬坑問題之modal的顯示與否應該是使用v-show,本文通過實例圖文相結合的形式給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04解決antd日期選擇組件,添加value就無法點擊下一年和下一月問題
這篇文章主要介紹了解決antd日期選擇組件,添加value就無法點擊下一年和下一月問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10vue使用 better-scroll的參數(shù)和方法詳解
這篇文章主要介紹了vue使用 better-scroll的參數(shù)和方法詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-01-01