vue项目里面实现上传图片并且可以剪辑的功能

如何在Vue项目里面实现图片剪辑功能并且操作之后上传
可以使用ele或者ant-design-vue或者任意含有upload上传组件的ui库配合vue-cropper剪辑组件使用即可

拿自己使用得例子如下：
      <a-modal
        :visible.sync="visible"
        :title="title"
        @cancel="cancel"
        :centered="center"
        :mask="false"
        :width="width"
        :footer="null"
      >
        <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"
              :fixed="option.fixed"
              :fixedNumber="option.fixedNumber"
              :centerBox="option.centerBox"
              :infoTrue="option.infoTrue"
              :fixedBox="option.fixedBox"
            ></VueCropper>
          </div>
        </div>
        <div align="center" style="margin-top:20px;">
          <a-space size="large">
            <a-button icon="zoom-in" type="primary" @click="changeScale(1)"
              >放大</a-button
            >
            <a-button icon="zoom-out" type="primary" @click="changeScale(-1)"
              >缩小</a-button
            >
            <a-button icon="undo" type="primary" @click="rotateLeft"
              >左旋转</a-button
            >
            <a-button icon="redo" type="primary" @click="rotateRight"
              >右旋转</a-button
            >
            <a-button @click="cancel">取 消</a-button>
            <a-button @click="comfirm" type="primary">确认</a-button>
          </a-space>
        </div>
      </a-modal>
      
      主要看配置项，详情可以看官网      
      option: {
        img: "", // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 0.8, // 裁剪生成图片的质量
        outputType: "jpeg", // 裁剪生成图片的格式
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        // autoCropWidth: 300, // 默认生成截图框宽度
        // autoCropHeight: 200, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [7, 5], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMoveBox: false, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      },
         //图片缩放
        changeScale(num) {
          num = num || 1;
          this.$refs.cropper.changeScale(num);
        },
        //向左旋转
        rotateLeft() {
          this.$refs.cropper.rotateLeft();
        },
        //向右旋转
        rotateRight() {
          this.$refs.cropper.rotateRight();
        },
        
      在使用得时候需要将父组件里面得upload组件里面的beforeupload方法里面获取得file
      传给剪辑框里面使用，在这个方法里面你可以先判断一些格式问题，图片大小问题，判断
      结束之后如果满足条件显示弹框并且将需要的file信息传过去并且也需要将上传文件的
      地址也要给到option配置项里面显示出来，兵器需要关闭组件自带的上传过程，因为使
      用的时候一般都是配合一个自定义上传方法。还有在点击确认的时候通过插件自带的方法
      获取的数据是一个bolb格式的数据，依据接口需要传的格式去做改变即可，如下：
      
      传值过程一个file一个url,在beforeUpload方法里面
      this.imgurl = window.webkitURL.createObjectURL(file)
      
      获取插件里面修改之后的图片数据
      this.$refs.cropper.getCropBlob(data => {
        console.log(data, "dadadadda");

        let file = new File([data], this.filename, {
          lastModified: Date.now(),
          uid: this.file.uid,
          type: this.file.type
        });
        this.$emit("uploadImage", file);
      });
      uploadImage方法就是父组件里面的上传方法
      
      也有不一样的使用如下：
      参考：https://blog.csdn.net/qq_41107231/article/details/109725839
      
      
复制代码