cropper（裁切弹出框）

基础用法

示例：

代码示例：

二次封装的裁切组件

<!-- 图片剪切组件 -->
<template>
  <!-- 容器 -->
  <v-cropper ref="cropper" @confirm="handleConfirm" />
</template>
<script>
import {fileDisplay} from '@/mixin/file';
import fetch from '@/config/fetch';
import util from '@/assets/js/util';

export default {
  data() {
    return {
      fileName: '', //文件名称
      callback: null, //回调函数
    };
  },
  methods: {
    /**
     * 打开剪切
     * 1、调用组件剪切
     * 2、存储回调函数与文件名称
     */
    open({ id, name }, callback) {
      this.$refs.cropper.open(fileDisplay(id, name));
      this.fileName = name;
      this.callback = callback;
    },
    /**
     * 处理确定
     * 1、构建上传的数据
     * 2、处理上传
     * 3、调用回调函数
     * 4、清空原始文件名称与回调函数
     */
    async handleConfirm(base64Url) {
      try {
        this.$loading();
        let uploadData = {
          attachId: util.generateUUID(),
          fileName: `${this.fileName.substring(
            this.fileName.lastIndexOf('.'),
            0
          )}.jpeg`,
          fileFormat: '.jpeg',
          contentType: 'image/jpeg',
          contentBase64: base64Url.split('data:image/jpeg;base64,')[1],
          sysId: 'PEX',
        };
        await this.upload([uploadData]);
        this.callback({ id: uploadData.attachId, name: uploadData.fileName });
        this.fileName = '';
        this.callback = null;
      } catch (err) {
        console.error(err);
        this.$message({
          type: 'error',
          message: err.msg,
        });
      } finally {
        this.$loadingClose();
      }
    },
    /**
     * 处理上传base64图片
     */
    upload(data) {
      return new Promise((resolve, reject) => {
        fetch
          .post('/pub/attachmentBase64FileUpload', data)
          .then(resolve)
          .catch(reject);
      });
    },
  },
};
</script>

事件：

事件名	说明	参数	参数说明
confirm	确认事件	base64Url	图片的base64数据

方法：

方法名	说明	参数	参数说明
open	打开图片裁剪组件	imgSrc	图片路径