vue中上传图片并裁剪

先安装

npm install vue-cropper // npm 安装
yarn add vue-cropper // yarn 安装

 引用

// 全局引用

main.js import VueCropper from 'vue-cropper'

Vue.use(VueCropper) 

上传按钮

<el-upload
        　:class="{hide:hideUpload}"
        multiple
        :file-list="imageUrl1"
        :action="action"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :limit="limit"
        :headers="headers"
        :on-success="handleAvatarSuccess"
        :on-exceed="handleExceed"
        :before-remove="beforeRemove"
      >
        <i class="el-icon-plus"></i>
      </el-upload>

 弹出的裁剪框

 

<!-- vueCropper 剪裁图片实现-->
    <el-dialog
      title="图片剪裁"
      :visible.sync="dialogVisible"
      class="crop-dialog"
      append-to-body
    >
      <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"
            :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight"
            @cropMoving="cropMoving"
          />
        </div>
      </div>
      <div class="action-box">
        <!-- <el-upload
          class="upload-demo"
          action=""
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handleAvatarSuccess"
        > -->
        <!-- <el-upload
          　:class="{hide:hideUpload}"
          multiple
          :file-list="imageUrl1"
          :action="action"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :limit="limit"
          :headers="headers"
          :on-success="handleAvatarSuccess"
          :on-exceed="handleExceed"
          :before-remove="beforeRemove"
          :show-file-list="false"
        >
          <el-button type="primary" plain>更换图片</el-button>
        </el-upload> -->
        <!-- <el-button type="primary" plain @click="clearImgHandle">
          清除图片
        </el-button> -->
        <el-button type="primary" plain @click="rotateLeftHandle">
          左旋转
        </el-button>
        <el-button type="primary" plain @click="rotateRightHandle">
          右旋转
        </el-button>
        <el-button type="primary" plain @click="changeScaleHandle(1)">
          放 大
        </el-button>
        <el-button type="primary" plain @click="changeScaleHandle(-1)">
          缩 小
        </el-button>
        <!-- <el-button type="primary" plain @click="downloadHandle('blob')"
          >下载</el-button
        > -->
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="finish" :loading="loading">
          确 认
        </el-button>
      </div>
    </el-dialog>

 

data(){
    return {
        dialogimgVisible: false,
      action: process.env.VUE_APP_BASE_API + "/ksUser/submitAttachment",
      headers: {},
      imageUrl1: [],
      // 裁剪框
      isPreview: false,
      dialogVisible: false,
      previewImg: "", // 预览图片地址
      // 裁剪组件的基础配置option
      option: {
        img: "", // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 1, // 裁剪生成图片的质量
        outputType: "png", // 裁剪生成图片的格式
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        canMoveBox: true, // 截图框能否拖动
        autoCropWidth: 0, // 默认生成截图框宽度
        autoCropHeight: 0, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        full: false, // 是否输出原图比例的截图
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      },
      // 防止重复提交
      loading: false,
      fileNames: "", //图片的名称
      imgList: [],
    }
}

 

methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogimgVisible = true;
    },
    // 上传成功
    handleAvatarSuccess(res, file) {
      // console.log(res, "上传");
      console.log(file, "上传成功文件");
      // console.log(this.imgIndex, "第几个上传");
      this.fileNames = file.response.name;
      this.imageUrl1.push(file.response);
      this.hideUpload = this.imageUrl1.length >= this.limit;

      // 上传成功后将图片地址赋值给裁剪框显示图片
      if (this.option.autoCropWidth != 0) {
        this.$nextTick(async () => {
          // base64方式
          // this.option.img = await fileByBase64(file.raw)
          this.option.img = file.response.url;
          this.loading = false;
          this.dialogVisible = true;
        });
      } else {
        // var imgs = [];
        this.imgList.push(file.response.fileName);
        this.$emit("getUpload", this.imgList);
      }

    },
    // 放大/缩小
    changeScaleHandle(num) {
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    // 左旋转
    rotateLeftHandle() {
      this.$refs.cropper.rotateLeft();
    },
    // 右旋转
    rotateRightHandle() {
      this.$refs.cropper.rotateRight();
    },
    // 下载
    downloadHandle(type) {
      let aLink = document.createElement("a");
      aLink.download = "author-img";
      if (type === "blob") {
        this.$refs.cropper.getCropBlob((data) => {
          let downImg = window.URL.createObjectURL(data);
          aLink.href = window.URL.createObjectURL(data);
          aLink.click();
        });
      } else {
        this.$refs.cropper.getCropData((data) => {
          let downImg = data;
          aLink.href = data;
          aLink.click();
        });
      }
    },
    // 清理图片
    clearImgHandle() {
      this.option.img = "";
    },
    // 截图框移动回调函数
    cropMoving(data) {
      // 截图框的左上角 x，y和右下角坐标x，y
      // let cropAxis = [data.axis.x1, data.axis.y1, data.axis.x2, data.axis.y2]
      // console.log(cropAxis)
    },
    finish() {
      // 获取截图的 blob 数据
      // this.$refs.cropper.getCropBlob((blob) => {
      //   console.log(blob, "blob数据");
      //   this.loading = true;
      //   this.dialogVisible = false;
      //   this.previewImg = URL.createObjectURL(blob);
      //   console.log(this.previewImg, "this.previewImg确认");
      //   this.isPreview = true;
      // });
      // 获取截图的 base64 数据
      this.loading = true;
      this.$refs.cropper.getCropData((data) => {
        // console.log(data, "获取截图的 base64 数据");
        var fileNamed = this.base64ToFile(data, this.fileNames);
        // console.log(fileNamed, "fileNamed图片转换成的filename ");
        let formData = new FormData();
        formData.append("file", fileNamed); //非常重要的一步 这是将base64转换成file传给后端的关键
        // formData.append("flag", "videoImg"); // 额外参数
        submitAttachment(formData).then((res) => {
          if (res.code == 200) {
            this.$message.success("上传成功");
            this.imgList.push(res.fileName);
            this.$emit("getUpload", this.imgList);//将上传完成的图片传给父组件
            this.dialogVisible = false;
          }
        });
      });
    },
    //将base64格式转换为文件格式，因为我这向后台提交数据时需要文件格式
    base64ToFile(urlData, fileName) {
      let arr = urlData.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let bytes = atob(arr[1]); // 解码base64
      let n = bytes.length;
      let ia = new Uint8Array(n);
      while (n--) {
        ia[n] = bytes.charCodeAt(n);
      }
      return new File([ia], fileName, { type: mime });
    },
    // 限制选择
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择${this.limit}个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    // 移除
    beforeRemove(file, fileList) {
      this.$confirm(`确定移除该图片？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const filePath = file.url;
          const i = this.imageUrl1.findIndex((x) => x.url === filePath);
          // 3.调用splice方法，移除图片信息
          this.imageUrl1.splice(i, 1);
          if (this.imgIndex == 1) {
            this.list.householdRegisters.splice(i, 1);
            // this.list.householdRegisters = "";
            this.hideUpload = this.imageUrl1.length >= this.limit;
          }

          if (this.imgIndex == 2) {
            // this.list.idPhotos = "";
            this.list.idPhotos.splice(i, 1);
            this.hideUpload = this.imageUrl1.length >= this.limit;
          }
          if (this.imgIndex == 3) {
            // this.list.diplomas = "";
            this.list.diplomas.splice(i, 1);
            this.hideUpload = this.imageUrl1.length >= this.limit;
          }
          if (this.imgIndex == 4) {
            // this.list.proofOfEmployments = "";
            this.list.proofOfEmployments.splice(i, 1);
            this.hideUpload = this.imageUrl1.length >= this.limit;
          }
          if (this.imgIndex == 5) {
            // this.list.honorCertificates = "";
            this.list.honorCertificates.splice(i, 1);
            this.hideUpload = this.imageUrl1.length >= this.limit;
          }
          if (this.imgIndex == 6) {
            // this.list.videoUploads = "";
            this.list.videoUploads.splice(i, 1);
            this.hideUpload = this.imageUrl1.length >= this.limit;
          }
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },

是参照这位博主的改进的  仅作为本人的学习积累笔记  如有侵权 私信我删除谢谢vue+element实现图片上传及裁剪功能（vue-cropper）_努力搬砖的阿一的博客-CSDN博客_element 图片裁切