使用插件vue-cropper(https://www.npmjs.com/package/vue-cropper/v/0.4.7);
主要代码逻辑
图片选择后判断类型,选择需要裁剪的区域.
点击裁剪并上传后执行uploadImg方法, this.$refs.cropperImg.getCropData((data) => {}) //data为裁剪后的图片的base64 判断裁剪后的图片大小 >200k 进行压缩,压缩后发送正式上传图片请求 <200k直接发送上传请求
cropImage(file) {
let _this = this;
this.fileUpload = file; //保存选择的文件信息
if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(file.name)) {
this.$Message.error('图片类型必须是jpeg,jpg,png中的一种')
return false
}
this.isShow = true;
let reader = new FileReader();
reader.onload = (e) => {
let data;
if (typeof e.target.result === 'object') {
// 把Array Buffer转化为blob 如果是base64不需要
data = window.URL.createObjectURL(new Blob([e.target.result]))
}
else {
data = e.target.result
}
_this.cropper.img = data
}
// 转化为base64
reader.readAsDataURL(file)
return false;
},
页面使用
<CropImage @uploadSuccess="handleSuccess" :cropperIndex="index" :cropperSize="[300,120]" :fixedRadio="[15,6]" :uploadTip="uploadTip" :uploadFormat="['jpg','jpeg','png']" ref="cropImage"></CropImage>
CropImage.vue剪裁/压缩组件封(完整代码)