安装
npm install vue-cropper -S
全局引入:
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
下面为单组件引入:
<template>
<el-form>
<el-form-item label="培训图片">
<input
type="file"
hidden
ref="header_img"
@change="handleAvatarImgChange('header_img','header_img')"
name="header_img"
>
<div class="header_img_box">
<img ref="train_header_img" src="../../../static/img/train.png" alt>
<el-button
style="margin-left: 20px;"
type="primary"
size="small"
@click="handleChooseAvatarImgFile('header_img')"
slot="append"
>选择文件
</el-button>
</div>
</el-form-item>
</el-form>
<!-- vueCropper 剪裁图片实现-->
<div class="vue-cropper-box" v-if="isShowCropper">
<div class="vue-cropper-content">
<vue-cropper
ref="cropper"
:img="options.img"
:outputSize="options.outputSize"
:outputType="options.outputType"
:info="options.info"
:canScale="options.canScale"
:autoCrop="options.autoCrop"
:autoCropWidth="options.autoCropWidth"
:autoCropHeight="options.autoCropHeight"
:fixed="options.fixed"
:fixedNumber="options.fixedNumber"
></vue-cropper>
</div>
<div class="cropper-btnbox">
<el-button type="primary" @click="onCubeImg">确定</el-button>
<el-button type="danger" @click="cropperCancel">取消</el-button>
</div>
</div>
</template>
<script>
export default {
import { VueCropper } from 'vue-cropper';
name: '',
data() {
return {
// 裁剪图片
isShowCropper: false,
// 裁剪组件的基础配置option
options: {
img: '', // 裁剪图片的地址
info: true, // 裁剪框的大小信息
outputSize: 1, // 裁剪生成图片的质量
outputType: 'jpeg', // 裁剪生成图片的格式
canScale: true, // 图片是否允许滚轮缩放
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 355, // 默认生成截图框宽度
autoCropHeight: 266, // 默认生成截图框高度
fixed: true, // 是否开启截图框宽高固定比例
fixedNumber: [5, 3] // 截图框的宽高比例
},
}
},
methods: {
// 确定裁剪图片
onCubeImg () {
// 获取cropper的截图的base64 数据
this.$refs.cropper.getCropData(data => {
this.$refs.train_header_img.src = data;
// 将剪裁后base64的图片转化为file格式
let file = this.dataURLtoFile(data, 'avatar');
this.uploadImgUrl = file;
this.cropperCancel();
});
},
// 取消裁剪
cropperCancel () {
this.isShowCropper = false;
this.options.img = '';
this.$refs.header_img.value = '';
},
// 将base64转换为文件对象
dataURLtoFile (dataurl, filename) {
let arr = dataurl.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
console.log(mime);
// 转换成file对象
return new File([u8arr], filename + '.' + mime.split('/')[1], {
type: mime
});
// 转换成成blob对象
// return new Blob([u8arr],{type:mime});
},
// 处理文件
handleAvatarImgChange (fileInput, file1) {
this.isShowCropper = true;
const files = this.$refs[fileInput].files;
let file = event.target.files[0];
if (window.FileReader) {
let reader = new FileReader();
reader.readAsDataURL(file);
// 监听文件读取结束后事件
reader.onloadend = e => {
this.options.img = e.target.result;
// this.$refs.train_header_img.src = e.target.result; // e.target.result就是最后的路径地址
};
}
if (files.length > 1) {
this.addTrainForm.header_img = '';
return this.$message.error('只能选择一个文件');
}
if (!files.length) {
this.addTrainForm.header_img = '';
return false;
// return message.error('请选择培训宣传图');
}
this.$set(this.addTrainForm, file1, files[0].name);
},
// 选择文件
handleChooseAvatarImgFile (fileName) {
this.$refs[fileName].click();
},
},
components: {
'vue-cropper': VueCropper
},
}
</script>
<style>
</style>