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

2019-11-19 11:00:15

字体：大中小

来源：转载

供稿：网友

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

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta name="description" content=""><meta name="keywords" content=""><!-- 引入vue --><script src="https://cdn.jsdelivr.net/npm/vue"></script><!-- 引入axios --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><!-- 引入样式 --><link rel="stylesheet" href=https://unpkg.com/element-ui/lib/theme-chalk/index.css ><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script></head><body> <div id="app">  <el-upload   :action="posterUrl"   :before-upload="beforeUpload"   :http-request="(params)=>uploadImage(params)"   :on-remove="(file, fileList)=>removeImage(file, fileList)"   list-type="picture"   accept="image/*"  >   <el-button size="small">选择图片</el-button>  </el-upload> </div> <script type="text/javascript"> 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);   }  } })</script></body></html>

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

上一篇：扫微信小程序码实现网站登陆实现解析

下一篇：vue element upload实现图片本地预览