vue+element ui上傳文件,顯示的文件參數(shù)內(nèi)容只有uid問(wèn)題及解決
現(xiàn)象
使用elment ui的el-upload組件上傳文件，會(huì)導(dǎo)致上傳的文件參數(shù)file里面只包含uid，沒(méi)有其他信息
- file : { uid : 52688455 }
- 其他參數(shù)：xxxx
過(guò)程
在網(wǎng)上查資料，首先發(fā)現(xiàn)，是沒(méi)有設(shè)定content-type為 " multipart/form-data " 由于我是封裝了請(qǐng)求的，統(tǒng)一設(shè)定axios的請(qǐng)求config，所以我將統(tǒng)一的config刪除，然后在每個(gè)請(qǐng)求方法中都逐一設(shè)定了congfig，發(fā)現(xiàn)請(qǐng)求的content-type雖然改變，但是file的值還是只有uid，還是json形式的
后面又想到，可以將文件轉(zhuǎn)變成base64字符串，然后使用json的形式傳遞，但是這樣會(huì)讓前端和后端的工作量都增大（前端轉(zhuǎn)base64，后端解碼成文件），而且太麻煩了，不愿意做
最后發(fā)現(xiàn)，可以使用formData來(lái)進(jìn)行參數(shù)和文件的傳遞
FormData 會(huì)將文件自動(dòng)轉(zhuǎn)換成二進(jìn)制流，并且將header中的Content-type編碼類型被設(shè)為 "multipart/form-data"，這種編碼方式被用作文件傳輸提高傳輸效率，不再需要自己設(shè)定。
如果不使用FormData ，手動(dòng)設(shè)定Content-type編碼類型，那么傳輸?shù)奈募⒉皇嵌M(jìn)制，而是一個(gè)json的map集合，并且只存在uid
最后放上源碼
1、組件代碼
<el-dialog title="上傳文件" :visible.sync="dialogFormVisible1" class="dia">
<el-upload ref="upload" class="upload-demo" drag
action="https://jsonplaceholder.typicode.com/posts/" multiple
:on-preview="handlePreview"
:file-list="fileList" :limit="1"
:on-exceed="exceed" :auto-upload="false"
:http-request="handleHttpRequest" :on-change="handleChange" >
<div>
<i class="el-icon-upload"></i>
</div>
<div class="el-upload__text">
將文件拖到此處，或<em>點(diǎn)擊上傳</em>
</div>
</el-upload>
<el-button
style="margin-top: 20px"
size="small"
type="primary"
@click="submitUpload"
>上傳到服務(wù)器</el-button
>
</el-dialog>
2、由于我在組件中使用了:auto-upload=“false”，所以我是自定義上傳的，action請(qǐng)求地址是無(wú)效的，自定義axios請(qǐng)求
handleHttpRequest(param) {
if(this.fileStatus == 200){
var formData = new FormData();
formData.append('file', param.file);
formData.append('md5', this.mode.md5);
formData.append('sha1', this.mode.sha1);
formData.append('fileName', this.mode.fileName);
formData.append('fileID', this.mode.fileID);
formData.append('token', this.mode.token);
formData.append('createTime', this.mode.createTime);
formData.append('size', this.mode.size);
getUpload(this.url, formData)
.then((res) => {
if (res.data.returnCode == 0) {
this.dialogFormVisible1 = false;
this.init_1();
this.fileList = null;
return this.$message.success("上傳成功");
} else {
this.dialogFormVisible1 = false;
return this.$message.error(res.data.errMessage);
}
})
.catch((err) => {
this.dialogFormVisible1 = false;
return this.$message.error("請(qǐng)求失??！");
});
}else if(this.fileStatus == 201 || this.fileStatus == 202){
this.dialogFormVisible1 = false;
return this.$message.success("上傳成功");
}else{
this.dialogFormVisible1 = false;
return this.$message.error("文件上傳實(shí)際路徑請(qǐng)求失??！");
}
},
3、點(diǎn)擊提交
submitUpload() {
this.$refs.upload.submit();
},
擴(kuò)展 【Base64將文件轉(zhuǎn)成字符串】
1、安裝依賴
npm install --save js-base64
或者
cnpm install --save js-base64
2、使用
//在需要使用base64的組件中
let Base64 = require('js-base64').Base64;
const en = Base64.encode(file)//加密
const de= Base64.decode(en);//解密
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于vue-socket.io使用及版本原因消息無(wú)法監(jiān)聽(tīng)bug
這篇文章主要介紹了關(guān)于vue-socket.io使用及版本原因消息無(wú)法監(jiān)聽(tīng)bug，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue組織架構(gòu)樹(shù)圖組件vue-org-tree的使用解析
這篇文章主要介紹了Vue組織架構(gòu)樹(shù)圖組件vue-org-tree的使用解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
我們?cè)陂_(kāi)發(fā)的時(shí)候會(huì)經(jīng)常用的導(dǎo)出excel表格功能,剛好自己開(kāi)發(fā)有遇到,就記錄一下,下面這篇文章主要給大家介紹了關(guān)于Vue前端表格導(dǎo)出Excel文件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
Vue數(shù)據(jù)變化后頁(yè)面更新詳細(xì)介紹
這篇文章主要介紹了Vue在數(shù)據(jù)發(fā)生變化后是如何更新頁(yè)面的，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-10-10
使用Vue.observable()進(jìn)行狀態(tài)管理的實(shí)例代碼詳解
這篇文章主要介紹了使用Vue.observable()進(jìn)行狀態(tài)管理的實(shí)例代碼，本文通過(guò)代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
Vue動(dòng)態(tài)樣式幾種常用方法總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)樣式幾種常用方法總結(jié)的相關(guān)資料,在我們的前端界面中,很多的地方的樣式都是不確定的狀態(tài),要根據(jù)其他內(nèi)容的變化而變化樣式的,需要的朋友可以參考下2023-08-08
vue 屬性攔截實(shí)現(xiàn)雙向綁定的實(shí)例代碼
這篇文章主要介紹了vue 屬性攔截實(shí)現(xiàn)雙向綁定的實(shí)例代碼，代碼簡(jiǎn)答易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vue3自定義dialog、modal組件的方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
vue在頁(yè)面和方法中如何通過(guò)遍歷對(duì)象獲取對(duì)象的鍵(key)和值(value)
這篇文章主要介紹了vue在頁(yè)面和方法中如何通過(guò)遍歷對(duì)象獲取對(duì)象的鍵(key)和值(value)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue中iframe使用以及結(jié)合postMessage實(shí)現(xiàn)跨域通信
這篇文章主要介紹了vue中iframe使用以及結(jié)合postMessage實(shí)現(xiàn)跨域通信方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09