vue中form data形式傳參

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

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

接口請(qǐng)求如下：

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是一個(gè)對(duì)象

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

vue文件提交 FormData方式

做Vue項(xiàng)目的時(shí)候, 提交數(shù)據(jù)基本上都是用Axios, 之前做過(guò)的表單方面的提交，一直沒(méi)有空隙進(jìn)行總結(jié)，今天得空進(jìn)行一下復(fù)習(xí)和總結(jié)：Vue中使用Axios處理包含上傳文件的表單提交

可能出現(xiàn)的問(wèn)題：

前驅(qū)知識(shí)

FormDate

FormData 接口提供了一種表示表單數(shù)據(jù)的鍵值對(duì) key/value 的構(gòu)造方式，并且可以輕松的將數(shù)據(jù)通過(guò)XMLHttpRequest.send() 方法發(fā)送出去，本接口和此方法都相當(dāng)簡(jiǎn)單直接。如果送出時(shí)的編碼類(lèi)型被設(shè)為 “multipart/form-data”，它會(huì)使用和表單一樣的格式。

每個(gè)FormData對(duì)象都有一個(gè)相關(guān)的entry。它最初是一個(gè)空列表。entry 由name和value組成。

英文文獻(xiàn)：https://xhr.spec.whatwg.org/#interface-formdata

FormData()使用的時(shí)候要?jiǎng)?chuàng)建一個(gè)新的 FormData 對(duì)象。

let FormData = new FormData();

方法

FormData.append(name, value)`

向 FormData 對(duì)象中添加新的屬性值，F(xiàn)ormData 對(duì)應(yīng)的屬性值存在也不會(huì)覆蓋原值，而是新增一個(gè)值，如果屬性不存在則新增一項(xiàng)屬性值。

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

請(qǐng)注意參數(shù)name、value和blobValue存在的原因是由于用于編寫(xiě)的編輯軟件的限制XMLHttpRequest標(biāo)準(zhǔn)。

FormData.delete(name)

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

如果在這個(gè)條目列表中沒(méi)有名稱(chēng)為name的條目，則返回null。

返回此條目列表中名稱(chēng)為name的第一個(gè)條目的值。

• FormData.getAll(name)返回一個(gè)包含 FormData 對(duì)象中與給定鍵關(guān)聯(lián)的所有值的數(shù)組。

如果在這個(gè)條目列表中沒(méi)有名稱(chēng)為name的條目，則返回空列表

按順序從這個(gè)條目列表中返回名稱(chēng)為name的所有條目的值

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

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

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

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

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

2.如果使用name、blobValue和filename，則將entry設(shè)為創(chuàng)建條目的結(jié)果。

3.如果在這個(gè)條目列表中有名稱(chēng)為name的條目，那么用entry替換第一個(gè)這樣的條目，并刪除其他條目

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

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

FormData的使用

axios 傳參時(shí)要注意的

 
//重點(diǎn)在*   
//重點(diǎn)在*   
//重點(diǎn)在*   
//重點(diǎn)在*   
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=>{
     //請(qǐng)求成功返回的數(shù)據(jù)在這進(jìn)行操作
     
 }).catch(err=>{
    //請(qǐng)求失敗返回的數(shù)據(jù)在這 
     
 });

URL

URL.createObjectURL(file)

通過(guò)URL.createObjectURL(file)可以獲取當(dāng)前文件的一個(gè)內(nèi)存URL，

createObjectURL是同步執(zhí)行的

createObjectURL返回一段帶hash的url，并且一直存儲(chǔ)在內(nèi)存中，直到document觸發(fā)了unload事件（例如：document close）或者執(zhí)行revokeObjectURL來(lái)釋放。

實(shí)操

下面使用兩種方式進(jìn)行講解文件如何提交：

1.使用element-ui

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

使用 element-ui 中的 Upload 組件，

代碼引入以后查看upload組件對(duì)應(yīng)的方法屬性，里面有兩個(gè)方法：on-success和on-change兩個(gè)鉤子函數(shù)，

element-UI將返回的file對(duì)象封裝了一下, 首先我們要拿到真正的文件對(duì)象, 使用的時(shí)候一定要在提交數(shù)據(jù)之前看看數(shù)據(jù)到底在哪里：

• 真正的File對(duì)象是fileList數(shù)組中某個(gè)元素的raw屬性!
• 真正的File對(duì)象是fileList數(shù)組中某個(gè)元素的raw屬性!
• 真正的File對(duì)象是fileList數(shù)組中某個(gè)元素的raw屬性!
• 真正的File對(duì)象是fileList數(shù)組中某個(gè)元素的raw屬性!

重要的事多說(shuō)幾遍?。。。?/p>

在這我選擇使用on-change，因?yàn)閑lement-UI中提供了一個(gè)http-request事件來(lái)覆蓋默認(rèn)的action, 這樣很好的避免了一些異常，on-success雖然通過(guò)了驗(yàn)證, 但是在生產(chǎn)環(huán)境中由于action地址空所以默認(rèn)請(qǐng)求當(dāng)前地址, 出現(xiàn)了404。

<template>
? ? <el-upload
? ? ? ? class="avatar-uploader"
? ? ? ? action="#"
? ? ? ? :show-file-list="false"
? ? ? ? :on-change="changeImg"http:// changeImg事件名是自定義的
? ? ? ? >
? ? ? ? <img v-if="imageUrl" :src="imageUrl" class="avatar" >
? ? ? ? <i v-else class="el-icon-plus avatar-uploader-icon"></i>
? ? </el-upload>
</template>

<script>
? ? ? //改變圖片時(shí),獲取圖片路徑及信息，e 指的是提交上來(lái)的文件
? ? ? ? changeImg(e){
? ? ? ? ? // 1.處理文件大小
? ? ? ? ? if(e.size > 2*1024*1024){
? ? ? ? ? ? alert('文件大小不能超過(guò)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地址,并顯示在頁(yè)面中
? ? ? ? ? this.imageUrl = URL.createObjectURL(e.raw)
? ? ? ? ? // 將文件存放到form.img中
? ? ? ? ? this.form.img = e.raw;//真正的File對(duì)象是fileList數(shù)組中某個(gè)元素的raw屬性!
? ? ? ? ? ??
? ? ? ? },
</script>

2.使用原始的方法

自己寫(xiě)好樣式：

<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.確認(rèn)文件大小
? ? ? if (file.size > 2 * 1024 * 1024) {
? ? ? ? warningAlert("文件大小不能大于2M");
? ? ? ? return;
? ? ? }
? ? ? // 2.確認(rèn)文件格式
? ? ? let arr = [".jpg", ".jpng", ".png", ".jpeg"];
? ? ? let lastName = file.name.slice(file.name.lastIndexOf("."));
? ? ? if (!arr.some(item => item == lastName)) {
? ? ? ? warningAlert("文件格式錯(cuò)誤");
? ? ? ? return;
? ? ? }
? ? ? // 3.獲取文件的存儲(chǔ)位置用于渲染頁(yè)面
? ? ? this.imgUrl = URL.createObjectURL(file);
? ? ? // console.log(this.imgUrl);
? ? ? // 4.將文件賦值給要提交的變量
? ? ? this.form.img = file;
? ? },
</script>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論