Vue 项目中 Cropper 图片裁剪的使用及遇到的问题

为什么用

个人中心的头像上传需要对图片进行裁剪

1、安装引入

npm install vue-cropper

在 main.js 中

import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

2、使用

页面逻辑：点击修改按钮出现弹窗，再上传图片，调整图片，确定按钮上传裁剪的图片

3、我的需求

我的想法是控制用户的图片尺寸限制为 200 X 200。
用到（调整）了配置项中 以下
fixedBox 固定截图框大小 不允许改变
autoCropWidth: 200 默认生成截图框宽度
autoCropHeight: 200 默认生成截图框高度 。

4、主要代码

	
		
			

				
				
			
		
		
			
				
					
					上传图片
				
			
		
	

data 中配置参数

option: {
    img: "",
    outputSize: 1, // 裁剪生成图片的质量
    outputType: 'jpeg', // 裁剪生成图片的格式 jpeg, png, webp
    info: true, // 裁剪框的大小信息
    canScale: true, // 图片是否允许滚轮缩放
    autoCrop: true, // 是否默认生成截图框
    autoCropWidth: 200, // 默认生成截图框宽度
    autoCropHeight: 200, // 默认生成截图框高度
    fixedBox: true, // 固定截图框大小 不允许改变
    fixed: true, // 是否开启截图框宽高固定比例
    fixedNumber: [1, 1], // 截图框的宽高比例 [ 宽度 , 高度 ]
    canMove: true, // 上传图片是否可以移动
    canMoveBox: true, // 截图框能否拖动
    original: false, // 上传图片按照原始比例渲染
    centerBox: false, // 截图框是否被限制在图片里面
    infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
    full: true, // 是否输出原图比例的截图
    enlarge: '1', // 图片根据截图框输出比例倍数
    mode: 'contain', // 图片默认渲染方式 contain , cover, 100px, 100% auto，
},

3、我遇到的问题

提交时有两种方法获取裁剪的图片，一种是 base64 和 blob 格式。
当我将文件放到 formData 提交后台时，发现没有数据。
原来其他请求都是 json 提交的（除了get），需要对这个请求的 contentType 进行修改。

// 提交的方法
handleOk() {
    this.$refs.cropper.getCropBlob(data = >{
        let add = new FormData();
        add.append("file", data, this.option.filename);
        userHeadUpdate(add).then(res = >{
            this.$message.success('修改成功');
            this.visible = false
        })
    })
},


// 更新头像的接口 修改了类型
export function userHeadUpdate(data) {
	return request({
		url: '/member/user/updateHead',
		headers: {
			'Content-Type': 'multipart-formData'
		},
		method: 'post',
		data: data
	})
}