Vue發(fā)送Formdata數(shù)據(jù)及NodeJS接收方式

更新時(shí)間：2022年06月02日 10:20:00 作者：biaov

這篇文章主要介紹了Vue發(fā)送Formdata數(shù)據(jù)及NodeJS接收方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue發(fā)送Formdata數(shù)據(jù)

參數(shù)blob是通過(guò)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)求后，我們?cè)跒g覽器的Network看是否有參數(shù)。

確保Network里有Form Data參數(shù) ，如果是Query String Parameters參數(shù)或其它，則有可能不成功。

NodeJS后臺(tái)接收

推薦使用multiparty模塊接收參數(shù)。

multiparty文檔地址

// 這里我配置了router，直接用app.post沒(méi)有影響
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)文章

vuex刷新之后數(shù)據(jù)丟失,數(shù)據(jù)持久化,vuex-persistedstate問(wèn)題
這篇文章主要介紹了vuex刷新之后數(shù)據(jù)丟失,數(shù)據(jù)持久化,vuex-persistedstate問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
前端Vue項(xiàng)目詳解--初始化及導(dǎo)航欄
這篇文章主要介紹了前端Vue項(xiàng)目詳解--初始化及導(dǎo)航欄,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下
2019-06-06
vue 解決無(wú)法對(duì)未定義的值,空值或基元值設(shè)置反應(yīng)屬性報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了vue 解決無(wú)法對(duì)未定義的值,空值或基元值設(shè)置反應(yīng)屬性報(bào)錯(cuò)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
Vue防抖與節(jié)流的使用介紹
防抖和節(jié)流的作用都是防止函數(shù)多次調(diào)用，下面這篇文章主要給大家介紹了關(guān)于vue函數(shù)防抖與節(jié)流的正確使用方法，需要的朋友可以參考下
2022-12-12
vue 實(shí)現(xiàn)在同一界面實(shí)現(xiàn)組件的動(dòng)態(tài)添加和刪除功能
這篇文章主要介紹了vue 實(shí)現(xiàn)在同一界面實(shí)現(xiàn)組件的動(dòng)態(tài)添加和刪除,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-06-06
vue實(shí)現(xiàn)excel表格的導(dǎo)入導(dǎo)出的示例
本文主要介紹了vue實(shí)現(xiàn)excel表格的導(dǎo)入導(dǎo)出的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
vue中使用input[type="file"]實(shí)現(xiàn)文件上傳功能
這篇文章主要介紹了vue中使用input[type="file"]實(shí)現(xiàn)文件上傳功能，實(shí)現(xiàn)代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-09-09
詳解Vuex管理登錄狀態(tài)
這篇文章主要介紹了詳解Vuex管理登錄狀態(tài),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
關(guān)于vue二進(jìn)制轉(zhuǎn)圖片顯示問(wèn)題后端返回的是byte[]數(shù)組
這篇文章主要介紹了關(guān)于vue二進(jìn)制轉(zhuǎn)圖片顯示問(wèn)題后端返回的是byte[]數(shù)組，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
vant自定義引入iconfont圖標(biāo)及字體的方法步驟
因?yàn)関antUI給的圖標(biāo)非常少,為了滿足自己的需求,就應(yīng)該找到一種方法來(lái)向vant添加自己自定義的圖標(biāo),對(duì)于自定義圖標(biāo)我第一時(shí)間想到的就是阿里的iconfont矢量圖庫(kù),這篇文章主要給大家介紹了關(guān)于vant自定義引入iconfont圖標(biāo)及字體的方法步驟,需要的朋友可以參考下
2023-09-09