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);
		}
	})  
},