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