vue-element-admin ImageCropper 图

直接上代码
配置好请求头，这是接口请求，后端提供的

const headers = {
    "x-oss-callback": getCallback(),
    "x-oss-callback-var": getCallbackVar()
};

重点改造upload的方法

// 上传图片
        upload(data) {
            const {
                lang,
                imgFormat,
                mime,
                url,
                params,
                field,
                ki,
                createImgUrl
            } = this;
            const fmData = new FormData();
            fmData.append(
                field,
                data2blob(createImgUrl, mime),
                field + "." + imgFormat
            );
            // 添加其他参数
            if (typeof params === "object" && params) {
                Object.keys(params).forEach(k => {
                    fmData.append(k, params[k]);
                });
            }
            // 上传文件
            this.reset();
            this.loading = 1;
            this.setStep(3);
            console.log("this", this);
            const client = new OSS({
                accessKeyId: this.$store.state.image.accessKeyId, // 查看你自己的阿里云KEY
                accessKeySecret: this.$store.state.image.accessKeySecret, // 查看自己的阿里云KEYSECRET
                bucket: this.$store.state.image.bucket, // 你的 OSS bucket 名称
                region: this.$store.state.image.region
            });

            try {
                // console.log("fmData", fmData);
                let file = data; // 拿到 file this.uploadFile
                let fileName = file.name.substr(0, file.name.lastIndexOf("."));
                let date = new Date().getTime();
                let fileNames = `${date}_${fileName}`; // 拼接文件名，保证唯一，这里使用时间戳+原文件名
                // 上传文件,这里是上传到OSS的 uploads文件夹下
                client
                    .put("uploads/" + fileNames, file, {
                        headers: headers
                    })
                    .then(res => {
                        console.log("uploadres", res);
                        if (res.data.code === 200) {
                            this.loading = 2;
                            this.$emit("crop-upload-success", res.data.data);
                        } else {
                            // options.onError("上传失败");
                            if (this.value) {
                                this.loading = 3;
                                this.hasError = true;
                                this.errorMsg = lang.fail;
                                this.$emit("crop-upload-fail", err, field, ki);
                            }
                        }
                    });
            } catch (e) {
                this.loading = 3;
                this.hasError = true;
                this.errorMsg = lang.fail;
            }
        },

vue的结构就按照demo的写法

        <img :src="ruleForm.cover_url" alt="" class="cover-img" />
          <el-button
            type="primary"
            icon="el-icon-upload"
            style="position: relative; top: -12px;"
            @click="imagecropperShow = true"
          >
            设置图片
          </el-button>
          <image-cropper
            v-show="imagecropperShow"
            :key="imagecropperKey"
            :width="546"
            :height="351"
            url="/upload"
            lang-type="zh"
            @close="close"
            @crop-upload-success="cropSuccess"
          />

变量自己设置好默认值

      imagecropperShow: false,
      imagecropperKey: 0

添加组件方法

    cropSuccess(resData) {
      this.imagecropperShow = false;
      this.imagecropperKey = this.imagecropperKey + 1;
      // 设置数值
      表单字段名 = resData.file_url;
      表单字段名 = resData.file_id;
    },
    close() {
      this.imagecropperShow = false;
    },