插件安装:
npm i vue-cropper
引入插件:
1.组件内使用
import { VueCropper } from 'vue-cropper'
components: {
VueCropper,
},
2.main.js中使用
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
代码:
上传图片或者选择网络图片
<!-- <el-upload class="avatar-uploader" action :http-request="uploadFileMethodAnswer" :show-file-list="false" :before-upload="beforeAvatarUpload" > --> <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> --> <i class="el-icon-plus avatar-uploader-icon" @click="dialogVisibleF(-1)"></i> <!-- </el-upload> -->
剪切弹出框:
<el-dialog title="图片剪裁(为确保剪切后图片的分辨率足够,请尽量不缩放剪切原图)" :visible.sync="dialogVisibleCropper" append-to-body width="70%" > <div class="cropper-content"> <div class="cropper" style="text-align: center;"> <vueCropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType" :info="true" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :fixedBox="option.fixedBox" :fixed="option.fixed" :fixedNumber="option.fixedNumber" ></vueCropper> </div> </div> <div slot="footer" class="dialog-footer"> <el-button @click="dialogVisibleCropper = false">取 消</el-button> <el-button type="primary" @click="finish" :loading="loading">确认</el-button> </div> </el-dialog>
参数配置:(参考官网:https://www.npmjs.com/package/vue-cropper)
data() {
return {
option: {
img: '',
outputSize: 1, // 剪切后的图片质量(0.1-1)
full: false, // 输出原图比例截图 props名full
outputType: 'png',
canMove: true,
original: false,
canMoveBox: true,
autoCrop: true,
autoCropWidth: 800,
autoCropHeight: 450,
fixedBox: false,
fixed: true,
maxImgSize: 3000, // 图片最大像素
fixedNumber: [16, 9]
},
};
},
方法:
// uploadFileMethodAnswer(file, fileList) { // let booler = true; // booler = this.beforeAvatarUpload(file); // if (booler === false) { // return; // } // const _this = this; // // let imgName = ""; // const fileObj = file.raw; // if (window.FileReader) { // let reader = new FileReader(); // // 转化为blob // reader.readAsArrayBuffer(fileObj); // // 转化为base64 // // reader.readAsDataURL(fileObj); // 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.$nextTick(() => { // _this.option.img = data; // _this.dialogVisibleCropper = true; // }); // }; // } // }, finish() { let _this = this; this.$refs.cropper.getCropBlob(data => { let base64Data = null; let a = new FileReader(); a.onload = function(e) { base64Data = e.target.result; _this.loading = true; const formData = new FormData(); formData.append('imageFile', base64Data); uploadImgBase64({ formData: formData, uploadCode: true }) .then(res => { if (res.code === 200) { if (res.data.length !== 0) { _this.imgInfoEidt.bannerUrl = res.data[0]; _this.$message.success('图片上传成功!'); _this.dialogVisibleCropper = false; _this.loading = false; } else { _this.loading = false; _this.$message.error('图片上传失败!'); } } else { _this.loading = false; _this.$message.error('图片上传失败!'); } }) .catch(() => { _this.loading = false; // this.$message.error('图片上传失败!'); }); }; a.readAsDataURL(data); }); },
注:选择网络图片会遇到图片跨域问题
处理:访问的服务器允许,资源跨域使用,也就是说设置了CORS跨域配置,Access-Control-Allow-Origin
前端直接使用图片路径:this.option.img = url; // url 图片网络路径