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編碼類(lèi)型被設(shè)為 "multipart/form-data"，這種編碼方式被用作文件傳輸提高傳輸效率，不再需要自己設(shè)定。
如果不使用FormData ，手動(dòng)設(shè)定Content-type編碼類(lèi)型，那么傳輸?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、安裝依賴(lài)
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)文章
vue?button的@click方法無(wú)效鉤子函數(shù)沒(méi)有執(zhí)行問(wèn)題
這篇文章主要介紹了vue?button的@click方法無(wú)效鉤子函數(shù)沒(méi)有執(zhí)行問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue3列表移除元素后索引更新實(shí)現(xiàn)方法
這篇文章主要介紹了Vue3列表移除元素后索引更新實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-07-07
Vue cli構(gòu)建及項(xiàng)目打包以及出現(xiàn)的問(wèn)題解決
這篇文章主要介紹了Vue cli構(gòu)建及項(xiàng)目打包以及出現(xiàn)的問(wèn)題解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了vue路由傳參及獲取參數(shù)的方式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
在vuex中有四大金剛分別是State， Mutations，Actions，Getters，本文對(duì)這四大金剛做了詳細(xì)介紹，本文重點(diǎn)是給大家介紹vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用，感興趣的朋友一起看看吧2018-04-04
這篇文章主要介紹了15 分鐘掌握vue-next響應(yīng)式原理,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了在vue中使用G2圖表的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
vue 實(shí)現(xiàn)剪裁圖片并上傳服務(wù)器功能
這篇文章主要介紹了vue 實(shí)現(xiàn)剪裁圖片并上傳服務(wù)器功能，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-03-03
vue利用sync語(yǔ)法糖實(shí)現(xiàn)modal彈框的項(xiàng)目實(shí)踐
本文主要介紹了vue利用sync語(yǔ)法糖實(shí)現(xiàn)modal彈框的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
Vue3監(jiān)聽(tīng)reactive對(duì)象中屬性變化的方法
在 Vue 3 中,如果你想監(jiān)聽(tīng) reactive 對(duì)象中的某個(gè)屬性發(fā)生的變化,你可以使用 watch 函數(shù)進(jìn)行監(jiān)聽(tīng),watch 函數(shù)允許你觀(guān)察 reactive 對(duì)象的某個(gè)屬性或者整個(gè)對(duì)象,所以本文給大家介紹了Vue3監(jiān)聽(tīng)reactive對(duì)象中屬性變化的方法,需要的朋友可以參考下2024-08-08