微客导航 » 文章资讯 » vue+element-ui+axios实现图片上传

vue+element-ui+axios实现图片上传

2023-08-16 22:56:04 132

本文实例为大家分享了vue+element-ui+axios实现图片上传的具体代码，供大家参考，具体内容如下






Examples














选择图片

newVue({ 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('图片太大，请重新选择'); returnfalse; } constisSize=newPromise((resolve,reject)=>{ let_URL=window.URL||window.webkitURL; letimg=newImage(); img.onload=function(){ if(!_checkSize||(_checkSize&&img.width==_this.imgWidth&&img.height==_this.imgHeight)){ resolve(); } else{ reject(); } } img.src=_URL.createObjectURL(file); }).then(()=>{ returnfile; },()=>{ _this.$message.error('图片尺寸不对，请重新选择'); returnPromise.reject(); }); returnisSize; }, uploadImage(params){ console.log(params); letuploadData=newFormData(); uploadData.append('file',params.file); letconfig={ headers:{ 'Content-Type':'multipart/form-data' } }; this.uploadPoster('homed'+newDate().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){ letposter_upload_path="http://xxxxxxxxxxxx/httpdocsup/poster/news/"; returnaxios.post(poster_upload_path+url,obj,config); } } })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

vue+element-ui+axios实现图片上传

热门推荐

随机推荐