vue+element-ui+axios如何實(shí)現(xiàn)圖片上傳-創(chuàng)新互聯(lián)
這篇文章主要介紹了vue+element-ui+axios如何實(shí)現(xiàn)圖片上傳，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)是網(wǎng)站建設(shè)專家,致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營銷，專業(yè)領(lǐng)域包括成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、
外貿(mào)營銷網(wǎng)站建設(shè)、電商網(wǎng)站制作開發(fā)、
微信小程序開發(fā)、微信營銷、系統(tǒng)平臺開發(fā)，與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開發(fā)公司不同，我們的整合解決方案結(jié)合了恒基網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營銷的理念，并將策略和執(zhí)行緊密結(jié)合，且不斷評估并優(yōu)化我們的方案，為客戶提供全方位的互聯(lián)網(wǎng)品牌整合方案！
本文實(shí)例為大家分享了vue+element-ui+axios實(shí)現(xiàn)圖片上傳的具體代碼，供大家參考，具體內(nèi)容如下
Examples
選擇圖片
new Vue({
el: '#app',
data: {
posterUrl: '',
imgUrls: [],
imgWidth: '320',
imgHeight: '400',
},
methods: {
beforeUpload(file) {
let _this = this;
let _checkSize = false; //是否需要指定上傳圖片的尺寸
if(file.size > 1024*500) { //大小超過500kb
_this.$message.error('圖片太大，請重新選擇');
return false;
}
const isSize = new Promise((resolve, reject)=>{
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function () {
if(!_checkSize || (_checkSize && img.width==_this.imgWidth && img.height==_this.imgHeight)) {
resolve();
}
else {
reject();
}
}
img.src = _URL.createObjectURL(file);
}).then(()=>{
return file;
}, ()=>{
_this.$message.error('圖片尺寸不對，請重新選擇');
return Promise.reject();
});
return isSize;
},
uploadImage(params) {
console.log(params);
let uploadData = new FormData();
uploadData.append('file', params.file);
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
};
this.uploadPoster('homed'+new Date().getTime()+'/'+params.file.name, uploadData, config)
.then(res=>{
if(res.status == 200) {
params.onSuccess();
this.imgUrls.push({name:params.file.name, url:res.data.url});
console.log(this.imgUrls);
}
}).catch(error=>{
params.onError();
this.$message.error('上傳失敗');
});
},
removeImage(file, fileList) {
console.log(fileList);
},
uploadPoster(url, obj, config) {
let poster_upload_path = "http://xxxxxxxxxxxx/httpdocsup/poster/news/";
return axios.post(poster_upload_path+url, obj, config);
}
}
})
Vue的優(yōu)點(diǎn)
Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue+element-ui+axios如何實(shí)現(xiàn)圖片上傳”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
網(wǎng)頁題目：vue+element-ui+axios如何實(shí)現(xiàn)圖片上傳-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://weahome.cn/article/djipjs.html
重慶分公司
重慶分公司
