vue 封装图片上传组件

裁剪后得到长宽比固定的图片

image.png

1. 为了界面上的美观，需要隐藏上传图片的按钮，"专题封面”的位置作为触发点，此时需要将点击事件传达到按钮上

this.$refs.input.dispatchEvent(new MouseEvent('click'));

2. 使用 Cropper 插件进行裁剪控制

this.cropper = new Cropper( this.preview, {
aspectRatio : opt.aspectRatio ||1,
autoCropArea : opt autoCropArea || 0.8,
viewMode : 1,
background : false,
checkOrientation:  true,
checkCrossOrigin: true,
zoomable : false,
zoomOnwheel : false,
center : false,
toggleDragModeOnDblclick : false,
})

3. 在裁剪过程中，滑动图片，会导致整体页面滑动，需要禁止页面滚动
4. 对大小超过2M的图片进行压缩。使用canvas绘制图片进行压缩
5. 修复ios上传图片的时候 被旋转的问题
6. 将图片转成后端支持的blob格式上传