vue+element ui上傳文件,顯示的文件參數(shù)內(nèi)容只有uid問題及解決
現(xiàn)象
使用elment ui的el-upload組件上傳文件，會導致上傳的文件參數(shù)file里面只包含uid，沒有其他信息
- file : { uid : 52688455 }
- 其他參數(shù)：xxxx
過程
在網(wǎng)上查資料，首先發(fā)現(xiàn)，是沒有設定content-type為 " multipart/form-data " 由于我是封裝了請求的，統(tǒng)一設定axios的請求config，所以我將統(tǒng)一的config刪除，然后在每個請求方法中都逐一設定了congfig，發(fā)現(xiàn)請求的content-type雖然改變，但是file的值還是只有uid，還是json形式的
后面又想到，可以將文件轉變成base64字符串，然后使用json的形式傳遞，但是這樣會讓前端和后端的工作量都增大（前端轉base64，后端解碼成文件），而且太麻煩了，不愿意做
最后發(fā)現(xiàn)，可以使用formData來進行參數(shù)和文件的傳遞
FormData 會將文件自動轉換成二進制流，并且將header中的Content-type編碼類型被設為 "multipart/form-data"，這種編碼方式被用作文件傳輸提高傳輸效率，不再需要自己設定。
如果不使用FormData ，手動設定Content-type編碼類型，那么傳輸?shù)奈募⒉皇嵌M制，而是一個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>點擊上傳</em>
</div>
</el-upload>
<el-button
style="margin-top: 20px"
size="small"
type="primary"
@click="submitUpload"
>上傳到服務器</el-button
>
</el-dialog>
2、由于我在組件中使用了:auto-upload=“false”，所以我是自定義上傳的，action請求地址是無效的，自定義axios請求
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("請求失??！");
});
}else if(this.fileStatus == 201 || this.fileStatus == 202){
this.dialogFormVisible1 = false;
return this.$message.success("上傳成功");
}else{
this.dialogFormVisible1 = false;
return this.$message.error("文件上傳實際路徑請求失?。?);
}
},
3、點擊提交
submitUpload() {
this.$refs.upload.submit();
},
擴展 【Base64將文件轉成字符串】
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);//解密
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
關于vue-socket.io使用及版本原因消息無法監(jiān)聽bug
這篇文章主要介紹了關于vue-socket.io使用及版本原因消息無法監(jiān)聽bug，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue組織架構樹圖組件vue-org-tree的使用解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
我們在開發(fā)的時候會經(jīng)常用的導出excel表格功能,剛好自己開發(fā)有遇到,就記錄一下,下面這篇文章主要給大家介紹了關于Vue前端表格導出Excel文件的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue在數(shù)據(jù)發(fā)生變化后是如何更新頁面的，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-10-10
使用Vue.observable()進行狀態(tài)管理的實例代碼詳解
這篇文章主要介紹了使用Vue.observable()進行狀態(tài)管理的實例代碼，本文通過代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
這篇文章主要給大家介紹了關于Vue動態(tài)樣式幾種常用方法總結的相關資料,在我們的前端界面中,很多的地方的樣式都是不確定的狀態(tài),要根據(jù)其他內(nèi)容的變化而變化樣式的,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue 屬性攔截實現(xiàn)雙向綁定的實例代碼，代碼簡答易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vue3自定義dialog、modal組件的方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
vue在頁面和方法中如何通過遍歷對象獲取對象的鍵(key)和值(value)
這篇文章主要介紹了vue在頁面和方法中如何通過遍歷對象獲取對象的鍵(key)和值(value)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue中iframe使用以及結合postMessage實現(xiàn)跨域通信
這篇文章主要介紹了vue中iframe使用以及結合postMessage實現(xiàn)跨域通信方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09