vue 封装图片上传组件

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

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格式上传