欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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是通過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ù)。

multiparty文檔地址

// 這里我配置了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的方法詳解

    今天小編就為大家分享一篇vue-vuex中使用commit提交mutation來修改state的方法詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 在antd中setFieldsValue和defaultVal的用法

    在antd中setFieldsValue和defaultVal的用法

    這篇文章主要介紹了在antd中setFieldsValue和defaultVal的用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • 一文詳解Vue3中使用ref獲取元素節(jié)點(diǎn)

    一文詳解Vue3中使用ref獲取元素節(jié)點(diǎn)

    這篇文章主要介紹了一文詳解Vue3中使用ref獲取元素節(jié)點(diǎn),本文介紹在vue3的setup中使用composition?API獲取元素節(jié)點(diǎn)的幾種方法,需要的朋友可以參考一下
    2022-07-07
  • vue2.x引入threejs的實(shí)例代碼

    vue2.x引入threejs的實(shí)例代碼

    這篇文章主要介紹了vue2.x引入threejs,如果在開發(fā)過程中出現(xiàn)threejs生成的canvas出現(xiàn)外邊框,只需要用css樣式修改,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2022-09-09
  • vue組件中iview的modal組件爬坑問題之modal的顯示與否應(yīng)該是使用v-show

    vue組件中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)擊下一年和下一月問題

    這篇文章主要介紹了解決antd日期選擇組件,添加value就無法點(diǎn)擊下一年和下一月問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • 如何解決vue在ios微信

    如何解決vue在ios微信"復(fù)制鏈接"功能問題

    這篇文章主要介紹了如何解決vue在ios微信"復(fù)制鏈接"功能問題,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-03-03
  • vue使用 better-scroll的參數(shù)和方法詳解

    vue使用 better-scroll的參數(shù)和方法詳解

    這篇文章主要介紹了vue使用 better-scroll的參數(shù)和方法詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-01-01
  • Vue集成Iframe頁面的方法示例

    Vue集成Iframe頁面的方法示例

    這篇文章主要介紹了Vue集成Iframe頁面的方法示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-12-12
  • 在nginx上部署vue項(xiàng)目(history模式)的方法

    在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

最新評(píng)論