VUE中头像裁剪上传到服务器

在项目遇到了如题所述的需求，很是折腾了一番。毕竟写前端和移动端native是不一样的！！现在进入正题，把dom部分摆出来：

    

        
        
        
上传头像
    

可以看到，在dom中我们使用了vueCropper这个组件。这个是今天的主角，图片裁剪控件。上github：

https://github.com/xyxiao001/vue-cropper

安装：$:npm install vue-cropper -s

vue-cropper组件的属性：

名称	功能	默认值	可选值
img	裁剪图片的地址	空	url 地址 || base64 || blob
outputSize	裁剪生成图片的质量	1	0.1 - 1
outputType	裁剪生成图片的格式	jpg (jpg 需要传入jpeg)	jpeg || png || webp
info	裁剪框的大小信息	true	true || false
canScale	图片是否允许滚轮缩放	true	true || false
autoCrop	是否默认生成截图框	false	true || false
autoCropWidth	默认生成截图框宽度	容器的80%	0~max
autoCropHeight	默认生成截图框高度	容器的80%	0~max
fixed	是否开启截图框宽高固定比例	true	true | false
fixedNumber	截图框的宽高比例	[1 : 1]	[宽度 : 高度]
full	是否输出原图比例的截图	false	true | false
fixedBox	固定截图框大小 不允许改变	false	true | false
canMove	上传图片是否可以移动	true	true | false
canMoveBox	截图框能否拖动	true	true | false
original	上传图片按照原始比例渲染	false	true | false
centerBox	截图框是否被限制在图片里面	false	true | false
high	是否按照设备的dpr 输出等比例图片	true	true | false
infoTrue	true 为展示真实输出图片宽高 false 展示看到的截图框宽高	false	true | false
maxImgSize	限制图片最大宽度和高度	2000	0-max

内置方法通过this.$refs.cropper 调用：

this.$refs.cropper.startCrop() 开始截图

this.$refs.cropper.stopCrop() 停止截图

this.$refs.cropper.clearCrop() 清除截图

this.$refs.cropper.changeScale() 修改图片大小 正数为变大 负数变小

this.$refs.cropper.getImgAxis() 获取图片基于容器的坐标点

this.$refs.cropper.getCropAxis() 获取截图框基于容器的坐标点

this.$refs.cropper.goAutoCrop 自动生成截图框函数

this.$refs.cropper.rotateRight() 向右边旋转90度

this.$refs.cropper.rotateLeft() 向左边旋转90度

图片加载的回调 imgLoad 返回结果success, error

// 获取截图的base64 数据
this.$refs.cropper.getCropData((data) => {
  // do something
  console.log(data)  
})

// 获取截图的blob数据
this.$refs.cropper.getCropBlob((data) => {
  // do something
  console.log(data)  
})

好了，vue-cropper就介绍到这里。详细的可以去github里面看。

现在我们看看 input type='file' 通过Input我们可以得到选择的图片，直接放入vueCropper中来:

 mounted(){
            let _self = this;
            $("input[type='file']").change(function(){
                Indicator.open();
                let file = this.files[0];
                if (window.FileReader) {
                    let reader = new FileReader();
                    reader.readAsDataURL(file);
                    //监听文件读取结束后事件    
                    reader.onloadend = function (e) {
                        _self.option.img = e.target.result;
                        Indicator.close();
                    };
                }
            });
        },

这里使用jquery来获取选取的图片，而且要放在mounted()生命周期钩子中。不能放入之前的生命的钩子中。

现在调用裁剪方法：

compressImg:function () {
                let _self = this;
                this.$refs.cropper.startCrop();
                this.$refs.cropper.getCropData((data) => {
                    let file = _self.convertBase64UrlToBlob(data);
                    file.name = 'head.jpg';
                    _self.uploadAction(file);
                })
            },

这里我们用得到的BASE64数据转换成Blob数据，直接把Blob当做file来这里，不要忘记设置file.name。不然上传文件的时候是会出错的！！得到数据之后，就开始上传了，调用你自己的ajax方法吧！这里我们使用axios来做图片上传：

  uploadAction:function (file) {
                Indicator.open();
                let _self = this;
                let param = new FormData();  // 创建form对象
                param.append('pics', file, file.name);  // 通过append向form对象添加数据
                let config = {
                    headers: {'Content-Type': 'multipart/form-data'}
                };
                // 添加请求头
                this.$axios.post('/appapi/user/i/up-headimg/pics', param, config)
                    .then(response => {
                      if(response.status == 200){
                          let data = response.data;
                          Indicator.close();
                         //出来服务器的返回数据
                      }
                    })
                    .catch(error=>{
                        Indicator.close();
                        console.log(error);
                    })
            },

完整代码如下：

​






​