vue项目中实现图片上传到本地预览并压缩的功能（其中还包括上传按钮的样式修改哦~）

功能描述：点击“上传”按钮，调起本地文件夹，上传图片到页面中进行展示。由于图片过大，需要进行压缩才能入库中保存。

1.首先进行布局
HTML中

<div class="licenceBox">
     <input 
          class="licenceBtn" 
          accept="image/jpeg,image/jpg,image/png"
          type="file"
          @change="upload($event)"
     />
     <!-- 这里的方法要用change，刚开始我用的click，读取不到照片的所需数据 -->
</div>

2.对样式进行修改。
当input的type属性为file时，默认样式为下图：
实际上需要的样式为下图：
那就可以进行如下修改啦

<style>
.licenceBox{
	display: inline-block;
	position: relative;
	padding: 1px 24px;
	overflow: hidden;
	color:#fff;
	background: #3B85F0;
	border-radius:15px;
}
.licenceBtn{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
	    left: 0;
	    outline: none;
	    background: transparent;
	    filter:alpha(opacity=0);
		-moz-opacity:0;
		-khtml-opacity: 0;
		opacity: 0;
}
</style>

3.重要的一环来啦，本地选取图片并在页面成功预览，传base64给后端进行入库操作。

upload(e){
            // 选择的文件对象
            let file = e.target.files[0];
            let that = this;
            if (file) {   
                let reader = new FileReader();
                reader.onload = (e)=>{
                    if (e.target.result.length / 1024 > 1024) {   // 大于1M进行图片压缩
                       //压缩方法进行了封装，请看4
                        imageCompression(e,function(data){
                             //that.passImg 为项目中img标签的src动态绑定值
                             that.passImg = data;
                        })
                    } else {
                         that.passImg = e.target.result；
                    }
                }
                reader.readAsDataURL(file);
            }
        } ,

4.图片压缩

export function imageCompression(e,next){
     //创建一个img对象
      var img = new Image();
      img.src = e.target.result;
	  // base64地址图片加载完毕后执行
	  img.onload = function () {
		    // 缩放图片需要的canvas（也可以在DOM中直接定义canvas标签，这样就能把压缩完的图片不转base64也能直接显示出来）
		    var canvas = document.createElement('canvas');
		    var context = canvas.getContext('2d');
		    // 图片原始尺寸
		    var originWidth = this.width,
		        originHeight = this.height,
		        // 最大尺寸限制，可通过设置宽高来实现图片压缩程度
		        maxWidth = 800,
		        maxHeight = 800,
		         // 目标尺寸
		         targetWidth = originWidth,
		         targetHeight = originHeight,
		    // 图片尺寸超过最大尺寸的限制
		    if(originWidth > maxWidth || originHeight > maxHeight) {
		      if(originWidth / originHeight > maxWidth / maxHeight) {
		        // 更改宽度，按照宽度限定尺寸
		        targetWidth = maxWidth;
		        targetHeight = Math.round(maxWidth * (originHeight / originWidth));
		      } else {
		        targetHeight = maxHeight;
		        targetWidth = Math.round(maxHeight * (originWidth / originHeight));
		      }
		    }
		    //对图片进行缩放
		    canvas.width = targetWidth;
		    canvas.height = targetHeight;
		    // 清除画布
		    context.clearRect(0, 0, targetWidth, targetHeight);
		    //画布背景色改为白色，默认是黑色，如果上传的是圆形图片会背景有黑色块
         　context.fillStyle = '#fff';
		    // 图片压缩
		    context.drawImage(img, 0, 0, targetWidth, targetHeight);
		    /*第一个参数是创建的img对象；第二三个参数是左上角坐标，后面两个是画布区域宽高*/
		    //压缩后的base64文件
		    next(canvas.toDataURL('image/jpeg', 0.92))
		    //0.92和最大尺寸800可以自行修改。当0.92设置为0.5时，大概压缩8倍左右。
	  }
}

5.将转成base64的图片传给后端，然后取值展示时，遇到了一个问题：返回的图片白板了，即返回的一张空白图。
解决办法：传给后端前进行加密处理，接收时进行解密处理。

//加密字符串,可以先将中文加密，然后再用btoa加密
function encryption(str){
    var encStr = encodeURIComponent(str);
    encStr = btoa(encStr);
    return encStr;
}
 
//解密，可以先将ascii解密，然后再将非ascii解密
function decrypt(str){
    var decStr = atob(str);
    decStr = decodeURIComponent(decStr);
    return decStr;