vue+vant 上傳圖片需要注意的地方
更新時(shí)間：2021年01月03日 10:58:41 作者：Myzhuo
這篇文章主要介紹了vue+vant 上傳圖片需要注意的地方，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
<van-uploader v-model="fileList" multiple :after-read="afterRead" :max-count="1" />
1:上傳文件流，提交的模式 肯定得 form-data模式
2：上傳的文件file 做出處理我這里做的只能選擇一張
afterRead(file){
console.log(file); //控制臺(tái)可以看見(jiàn)圖片信息
if(this.fileList.length > 1){
this.fileList.splice(1);
this.$msg({
text:'只能選擇這么多!',
type:'info'
})
return false;
}
let Files = this.Files;
Files.push(file.file);
},
3：vue 里面axios 攔截處理 因?yàn)樯蟼髂Ｊ奖仨毷莊rom-data 所以就要設(shè)置 config.headers['Content-Type'] = 'multipart/form-data';
//http request 攔截器
axios.interceptors.request.use((config) => {
if (config.method === 'post') {
if( config.data && !config.data.i ){
config.headers['Content-Type'] = 'multipart/form-data';
}else{
config.data = Qs.stringify(config.data);
}
// if ( config.data ){
// if ( config.data.i === undefined ){
// config.headers['Content-Type'] = 'multipart/form-data';
// }else{
// config.data = Qs.stringify(config.data);
// }
// }
}
return config;
}, (error) => {
return Promise.reject(error);
})
4：就是上次圖片前端做的處理需要用到 new FormData() 做出處理，因?yàn)槭俏募?，直接打印是看不出?lái)的詳情去看官網(wǎng)new FormData()。
WineOrder(){
console.log(this.Files)
this.disabled = true;
const data = new FormData();
const USER = JSON.parse(sessionStorage.getItem('USER'));
data.append('i',USER.uniacid);
data.append('token',USER.token);
data.append('bid',USER.bid);
data.append('roomid',this.roomid);
data.append('booker',this.dingName);
data.append('guestname',this.userName);
data.append('type',this.type);
data.append('tel',this.phone);
data.append('endtime',this.date);
data.append('file',this.Files[0]);
data.append('goodsinfo',JSON.stringify(this.savewineList));
WineOrder(data).then((e)=>{
if( e.code == 0 ){
this.disabled = false;
e.totalmoney = '';
var c ={
Topic:"",
data:e,
type:'Savewine'
}
return;
setTimeout(() => {
window.location.href="setterOrder?c=" rel="external nofollow" +JSON.stringify(c);
}, 1500);
}else{
this.disabled = false;
this.$msg({
text:e.msg,
type:'info'
})
}
})
},
效果圖
剩下的就交給后端處理就行了，到這里就完全可以了
以上就是vue+vant 上傳圖片需要注意的地方的詳細(xì)內(nèi)容，更多關(guān)于vue+vant 上傳圖片的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue CLI4.0 webpack配置屬性之productionSourceMap用法
這篇文章主要介紹了Vue CLI4.0 webpack配置屬性之productionSourceMap用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
詳解vue2父組件傳遞props異步數(shù)據(jù)到子組件的問(wèn)題
本篇文章主要介紹了vue2父組件傳遞props異步數(shù)據(jù)到子組件的問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Vue2的異步更新機(jī)制是基于JavaScript的事件循環(huán)機(jī)制實(shí)現(xiàn)的。nextTick方法則是在DOM更新后執(zhí)行回調(diào)函數(shù)。本文詳細(xì)介紹了Vue2的異步更新機(jī)制和nextTick原理，對(duì)于理解Vue2的渲染機(jī)制和優(yōu)化性能有很大的幫助。2023-04-04
vue中的render函數(shù),它返回的是一個(gè)虛擬節(jié)點(diǎn)vnode,也就是我們要渲染的節(jié)點(diǎn),下面這篇文章主要給大家介紹了關(guān)于Vue中render函數(shù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
element上傳組件循環(huán)引用及簡(jiǎn)單時(shí)間倒計(jì)時(shí)的實(shí)現(xiàn)
這篇文章主要介紹了element上傳組件循環(huán)引用及簡(jiǎn)單時(shí)間倒計(jì)時(shí)的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
vue中axios利用blob實(shí)現(xiàn)文件瀏覽器下載方式
這篇文章主要介紹了vue中axios利用blob實(shí)現(xiàn)文件瀏覽器下載方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
如何解決ECharts圖表切換后縮成一團(tuán)的問(wèn)題
這篇文章主要介紹了如何解決ECharts圖表切換后縮成一團(tuán)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue中的MVVM模式使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了Vue使用鼠標(biāo)在Canvas上繪制矩形，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
webpack&webpack-cli完全卸載過(guò)程
本文介紹了如何刪除全局和本地的webpack及其CLI,并提供了檢查webpack殘余文件的方法,總結(jié)了個(gè)人的操作經(jīng)驗(yàn),旨在為讀者提供參考,并期待獲得更多支持2024-09-09