vue項目中form data形式傳參方式

Posted on by

vue中form data形式傳參

vue項目中form data形式傳參，需要在headers中添加如下代碼

 headers: {
             'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
         }

接口請求如下：

export function subFaq (params) {
    return request({
        url: `/jxxx/pub/iface/speech/`,
        method: 'PUT',
        data:qs.stringify(params),
         headers: {
             'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
         }
    })
}

如下圖，在Form Data的中形式下，需要使用qs.stringify(params) ,params是一個對象

如下圖，在Form Data的中形式下，直接傳的是對象

vue文件提交 FormData方式

做Vue項目的時候, 提交數據基本上都是用Axios, 之前做過的表單方面的提交，一直沒有空隙進行總結，今天得空進行一下復習和總結：Vue中使用Axios處理包含上傳文件的表單提交

可能出現的問題：

常見的問題
1、上傳文件應該以什麼方式提交, 比如後臺是multipart/form-data, 而習慣性以json對象發送數據(實際上大量插件對數據對象也封裝瞭方法, 所以容易忽略)
2、上傳文件提交的格式, 以為將對象改成數組就太天真瞭
3、語法錯誤. 比如：>> :on-change=“自定義事件名” 寫成>> @on-change=""

前驅知識

FormDate

FormData 接口提供瞭一種表示表單數據的鍵值對 key/value 的構造方式，並且可以輕松的將數據通過XMLHttpRequest.send() 方法發送出去，本接口和此方法都相當簡單直接。如果送出時的編碼類型被設為 “multipart/form-data”，它會使用和表單一樣的格式。

每個FormData對象都有一個相關的entry。它最初是一個空列表。entry 由name和value組成。

英文文獻：https://xhr.spec.whatwg.org/#interface-formdata

FormData()使用的時候要創建一個新的 FormData 對象。

let FormData = new FormData();

方法

FormData.append(name, value)`

向 FormData 對象中添加新的屬性值，FormData 對應的屬性值存在也不會覆蓋原值，而是新增一個值，如果屬性不存在則新增一項屬性值。

append(name, value) 和 append(name, blobValue, filename)

請註意參數name、value和blobValue存在的原因是由於用於編寫的編輯軟件的限制XMLHttpRequest標準。

FormData.delete(name)
  • delete (name)方法步驟是從這個條目列表中刪除名稱為name的所有條目。
  • FormData.entries()返回一個包含所有鍵值對的iterator對象。
  • FormData.get(name)返回在 FormData 對象中與給定鍵關聯的第一個值。

如果在這個條目列表中沒有名稱為name的條目，則返回null。

返回此條目列表中名稱為name的第一個條目的值。

  • FormData.getAll(name)返回一個包含 FormData 對象中與給定鍵關聯的所有值的數組。

如果在這個條目列表中沒有名稱為name的條目，則返回空列表

按順序從這個條目列表中返回名稱為name的所有條目的值

  • FormData.has(name)返回一個佈爾值表明 FormData 對象是否包含某些鍵。

如果在條目列表中有一個名為name的條目，則has (name)方法步驟將返回true;否則false。

  • FormData.keys()返回一個包含所有鍵的iterator對象。
  • FormData.set(name, value)給 FormData 設置屬性值，如果FormData 對應的屬性值存在則覆蓋原值，否則新增一項屬性值。

set (name, value)和set (name, blobValue, filename)方法步驟如下:

1.給予的value要有value值;否則blobValue。

2.如果使用name、blobValue和filename，則將entry設為創建條目的結果。

3.如果在這個條目列表中有名稱為name的條目，那麼用entry替換第一個這樣的條目，並刪除其他條目

4.否則，將條目添加到this的條目列表中。

  • FormData.values()返回一個包含所有值的iterator對象。

FormData的使用

axios 傳參時要註意的

 
//重點在*   
//重點在*   
//重點在*   
//重點在*   
let file = new FormData();//*
  for(let key in data){//*
    file.append(key,data[key]);//*
  };
 axios({
    method:"post",
    url:baseUrl +"/api/cateadd",
    data:file,//*
  }).then(res=>{
     //請求成功返回的數據在這進行操作
     
 }).catch(err=>{
    //請求失敗返回的數據在這 
     
 });

URL

URL.createObjectURL(file)

通過URL.createObjectURL(file)可以獲取當前文件的一個內存URL，

createObjectURL是同步執行的

createObjectURL返回一段帶hash的url，並且一直存儲在內存中，直到document觸發瞭unload事件（例如：document close）或者執行revokeObjectURL來釋放。

實操

下面使用兩種方式進行講解文件如何提交：

1.使用element-ui

使用element-ui的方便之處就是不用再費勁自己寫css樣式，有包裝好的組件直接引入即可，在這不講怎麼使用element-UI的使用，感興趣的自己進官網進行查看（官網：https://element.faas.ele.me/#/zh-CN）

使用 element-ui 中的 Upload 組件，

代碼引入以後查看upload組件對應的方法屬性，裡面有兩個方法：on-success和on-change兩個鉤子函數，

鉤子函數 說明 類型
on-success 文件上傳成功時的鉤子 function(response, file, fileList)response是服務器返回的響應file一個文件fileList存放多個文件的數組
on-change 文件狀態改變時的鉤子，添加文件、上傳成功和上傳失敗時都會被調用 function(file, fileList)file一個文件fileList存放多個文件的數組

element-UI將返回的file對象封裝瞭一下, 首先我們要拿到真正的文件對象, 使用的時候一定要在提交數據之前看看數據到底在哪裡：

  • 真正的File對象是fileList數組中某個元素的raw屬性!
  • 真正的File對象是fileList數組中某個元素的raw屬性!
  • 真正的File對象是fileList數組中某個元素的raw屬性!
  • 真正的File對象是fileList數組中某個元素的raw屬性!

重要的事多說幾遍！！！！

在這我選擇使用on-change，因為element-UI中提供瞭一個http-request事件來覆蓋默認的action, 這樣很好的避免瞭一些異常，on-success雖然通過瞭驗證, 但是在生產環境中由於action地址空所以默認請求當前地址, 出現瞭404。

<template>
    <el-upload
        class="avatar-uploader"
        action="#"
        :show-file-list="false"
        :on-change="changeImg"// changeImg事件名是自定義的
        >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" >
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</template>
<script>
      //改變圖片時,獲取圖片路徑及信息，e 指的是提交上來的文件
        changeImg(e){
          // 1.處理文件大小
          if(e.size > 2*1024*1024){
            alert('文件大小不能超過2M')
            return
          }
          // 2.處理文件後綴
          var ext = ['.jpg','.png','.jpeg','.gif'];
          var extName = e.name.slice(e.name.lastIndexOf('.'));
          if(!ext.some(item=>item==extName)){
            alert('上傳文件格式不正確')
            return
          }
          // 上傳顯示的文件
          // 將文件生成url地址,並顯示在頁面中
          this.imageUrl = URL.createObjectURL(e.raw)
          // 將文件存放到form.img中
          this.form.img = e.raw;//真正的File對象是fileList數組中某個元素的raw屬性!
            
        },
</script>

2.使用原始的方法

自己寫好樣式：

<template>
    <!-- 自定義文件上傳 -->
    <div class="img-box">
        <h3>+</h3>
        <img v-if="imageUrl" :src="imageUrl" alt="">
        <input type="file" @change="changeImg1">
    </div>
</template>
<script>
  changeImg1(e){
       // 取出上傳的文件
      let file = e.target.files[0];
      // 1.確認文件大小
      if (file.size > 2 * 1024 * 1024) {
        warningAlert("文件大小不能大於2M");
        return;
      }
      // 2.確認文件格式
      let arr = [".jpg", ".jpng", ".png", ".jpeg"];
      let lastName = file.name.slice(file.name.lastIndexOf("."));
      if (!arr.some(item => item == lastName)) {
        warningAlert("文件格式錯誤");
        return;
      }
      // 3.獲取文件的存儲位置用於渲染頁面
      this.imgUrl = URL.createObjectURL(file);
      // console.log(this.imgUrl);
      // 4.將文件賦值給要提交的變量
      this.form.img = file;
    },
</script>

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：