vue 上传图片

vue 用 file 的 change获取到上传文件的基本信息

<input type="file" name="file" class="upload__input" @change="uploadChange" accept="image/png,image/gif">

<div class="imgSrc"><img :src="imgDataUrl" ></div>

然后拿到图片后用 beta64 转化预览图片

uploadChange(event){if(event.target.files.length>0){this.files = event.target.files[0];  //提交的图片this.$conf.getBase64(event.target,(url)=>{this.imgDataUrl = 'data:image/png;base64,'+url;   //显示的图片}); }},

beta64方法

getBase64 : function(file,callback){        var maxWidth = 640;        if(file.files && file.files[0]){            var thisFile = file.files[0];            if(thisFile.size>2019200){                // mualert.alertBox("图片不能超过800K");                alert("图片不能超过2M");                return            };            var reader = new FileReader();            reader.onload = function(event){                var imgUrl = event.target.result;                var img = new Image();                img.onload = function(){                    var canvasId = 'canvasBase64Imgid',                    canvas = document.getElementById(canvasId);                    if(canvas!=null){document.body.removeChild(canvas);}                    var canvas = document.createElement("canvas");                    canvas.innerHTML = 'New Canvas';                    canvas.setAttribute("id", canvasId);                    canvas.style.display='none';                    document.body.appendChild(canvas);                    canvas.width = this.width;                    canvas.height = this.height;                    var imageWidth = this.width,                     imageHeight = this.height;                    if (this.width > maxWidth){                        imageWidth = maxWidth;                        imageHeight = this.height * maxWidth/this.width;                        canvas.width = imageWidth;                        canvas.height = imageHeight;                    }                    var context = canvas.getContext('2d');                    context.clearRect(0, 0, imageWidth, imageHeight);                    context.drawImage(this, 0, 0, imageWidth, imageHeight);                    var base64 = canvas.toDataURL('image/png',1);                    var imgbase = base64.substr(22);                    callback(imgbase)                    //this.imgUrl =                 }                img.src = imgUrl;            }            reader.readAsDataURL(file.files[0]);        }    },

提交表单
addSub(){let data  = {};let files = this.files;let param = new FormData(); //创建form对象if(files!=''){param.append('file', files,files.name); //单个图片 ，多个用循环 append 添加}else{this.$message.error('请添加图片');}param.append('param', JSON.stringify(data));//添加form表单中其他数据let config = {    headers:{'Content-Type':'multipart/form-data'}};  //添加请求头this.$ajax.post(this.ajaxUrl +'addStation',param,config)  .then(response=>{  var ret = response.data;    if(ret.status){this.$message({message : '新增成功',type : 'success'})//清空数据this.imgDataUrl = '';this.files = [];}else{this.msg(ret.msg);}})  },