【Vue】插件:九、vue-cropper 实现图片裁剪功能

1. 安装

官方参考文档

npm i vue-cropper

2. 使用

2.1 单独封装插件

|-src
|-|-plugins
|-|-|-vue-croppper.js

import Vue from 'vue';
import VueCropper from 'vue-cropper';

Vue.use(VueCropper);

2.2 main.js中

import './plugins/vue-cropper';// 图片裁剪插件

3 封装组件为by-cropper

3.1 template

/* 图片裁剪 */

3.2 script

3.3 style 样式仅供参考

4. 使用组件

4.1 template片段

4.2 script片段

vuex 中的上传接口,接口如何写可以参考文章【Vue教程】Vue Cli3项目结构优化和【Vue教程】vuex、axios请求接口的几种方式

import ByCropper from '@/components/common/ByCropper';

export default {
    data() {
        return {
            /* vue-cropper 配置信息 */
            isShowCropper: false, // 是否显示-图片裁剪-弹窗
            cropperFile: {}, // 当前待裁剪图片的文件信息
            cropperOption: {
                img: '', // 裁剪图片的地址
                info: true, // 裁剪框的大小信息
                outputSize: 1, // 裁剪生成图片的质量
                full: false, // 输出原图比例截图 props名full
                outputType: 'jpeg', // 裁剪生成图片的格式
                canMove: true, // 能否拖动图片
                original: false, // 上传图片是否显示原始宽高
                canMoveBox: true, // 能否拖动截图框
                canScale: false, // 图片是否允许滚轮缩放
                autoCrop: true, // 是否默认生成截图框
                autoCropWidth: 400, // 默认生成截图框宽度
                autoCropHeight: 300, // 默认生成截图框高度
                fixedBox: false, // 截图框固定大小
                fixed: true, // 是否开启截图框宽高固定比例
                fixedNumber: [4, 3] // 截图框的宽高比例
            },
            methods:{
                // 以下方法可以根据 封装组件 this.$emit('cropperFinish', file, data); 中获取的 file data 自定义进行处理
                // 获取到文件时,进行如下处理
                handleFile(file){
                    this.cropperFile = file;
                    this.cropperOption.img = file.src;
                    this.isShowCropper = true;
                },
                // 确定裁剪
                cropperFinish(file) {
                    // 请求接口-上传文件
                    this.postUploadFile(file);
                },
                // 文件上传-接口-上传文件
                postUploadFile(file) {
                    console.log('PostUploadFile>', file);
                    let formData = new FormData();
                    formData.append('file', file, file.name);
                    // vuex 中的上传接口,接口如何写可以参考文章[杀杀杀]()
                    this.uploadFileCase(formData).then(res => {
                    console.log('uploadFileCase>', file);
                    if (res.code === 1) {
                    // 自定义操作
                    // this.fileList.push({
                        // name: file.name,
                        // src: file.src,
                       //  filePath: res.data,
                       //  file: file
                    // });
                    // this.ruleForm.imgPath = res.data;
                    // this.ruleForm.file = file;

                    this.isShowCropper = false;
                    this.cropperOption.img = null;
                    this.cropperFile = {};
                    }
                });
              },
            },
        }
    }
}

---

参考文档网址:
一个优雅的图片裁剪插件：vue-cropper
Vue项目图片剪切上传——vue-cropper的使用
vue使用vue-cropper实现裁剪、上传、下载功能