在vue中使用vue-cropper实现图片裁剪并上传服务器

前段时间接到一个需求，需要上传图片前可以对图片进行裁剪然后得到固定的像素上传到服务器，话不多说直接上代码

一，首先npm下载插件
npm install vue-cropper --save
二，在页面中引入
import { VueCropper } from “vue-cropper”
三，使用标签
直接上代码吧

<el-row>
            <el-col :xs="24" :md="12" :style="{ height: '350px' }">
              <vue-cropper
                ref="cropper"
                :img="options.img"
                :info="true"
                :autoCrop="options.autoCrop"
                :autoCropWidth="options.autoCropWidth"
                :autoCropHeight="options.autoCropHeight"
                :fixedBox="options.fixedBox"
                @realTime="realTime"
              />
            </el-col>
            <el-col :xs="24" :md="12" :style="{ height: '350px' }">
              <div class="teacher-upload-preview">
                <img :src="previews.url" :style="previews.img" />
              </div>
            </el-col>
          </el-row>
          <br />
          <el-row>
            <el-col :lg="2" :md="2">
              <el-upload
                action="#"
                :http-request="requestUpload"
                :show-file-list="false"
                :before-upload="beforeUpload"
              >
                <el-button size="small">
                  选择
                  <i class="el-icon-upload el-icon--right"></i>
                </el-button>
              </el-upload>
            </el-col>
            <el-col :lg="{ span: 1, offset: 2 }" :md="2">
              <el-button
                icon="el-icon-plus"
                size="small"
                @click="changeScale(1)"
              ></el-button>
            </el-col>
            <el-col :lg="{ span: 1, offset: 1 }" :md="2">
              <el-button
                icon="el-icon-minus"
                size="small"
                @click="changeScale(-1)"
              ></el-button>
            </el-col>
            <el-col :lg="{ span: 1, offset: 1 }" :md="2">
              <el-button
                icon="el-icon-refresh-left"
                size="small"
                @click="rotateLeft()"
              ></el-button>
            </el-col>
            <el-col :lg="{ span: 1, offset: 1 }" :md="2">
              <el-button
                icon="el-icon-refresh-right"
                size="small"
                @click="rotateRight()"
              ></el-button>
            </el-col>
          </el-row>

export default {
  name: "teacherBanner",
  components: { VueCropper },
  data() {
    return {
     
      baseUrl: process.env.VUE_APP_BASE_API,
      options: {
        img: "", //裁剪图片的地址
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 220, // 默认生成截图框宽度
        autoCropHeight: 279, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
      },
    };
  },
  created() {
   
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          //编辑
          if (this.form.id != null) {
            this.$refs.cropper.getCropBlob((data) => {
              let formData = new FormData();
              formData.append("file", data);
              uploadTeacherBanner(formData).then((response) => {
                this.form.photo = response.path;
                updateTeacherBanner(this.form).then((response) => {
                  this.$modal.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                });
              });
            });
          }
          //新增
          else {
            if (this.options.img == "") {
              this.$modal.msgError("请上传教师照片");
            } else {
              this.$refs.cropper.getCropBlob((data) => {
                let formData = new FormData();
                formData.append("file", data);
                uploadTeacherBanner(formData).then((response) => {
                  this.form.photo = response.path;
                  addTeacherBanner(this.form).then((response) => {
                    this.$modal.msgSuccess("新增成功");
                    this.open = false;
                    this.getList();
                  });
                });
              });
            }
          }
        }
      });
    },

    // 覆盖默认的上传行为
    requestUpload() {},
    // 向左旋转
    rotateLeft() {
      this.$refs.cropper.rotateLeft();
    },
    // 向右旋转
    rotateRight() {
      this.$refs.cropper.rotateRight();
    },
    // 图片缩放
    changeScale(num) {
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    // 实时预览
    realTime(data) {
      this.previews = data;
    },
    // 上传预处理
    beforeUpload(file) {
      if (file.type.indexOf("image/") == -1) {
        this.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
      } else {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          this.options.img = reader.result;
        };
      }
    },
  },
};