vue后台管理上传图片并实现图片裁剪

首先将上传图片组件的action地址设置为空，再绑定上传文件之前的钩子函数handeleBeforeUpSwiperImage，return false，停止上传，在上传文件之前的钩子函数中获取返回的文件信息，

<Upload
   :show-upload-list="false"
   :on-success="upImages"
   :before-upload="handeleBeforeUpSwiperImage"
   :on-exceeded-size="upImagesExceededSize"
   :action="''"
   :data="goodUrl"
   :max-size="5120"
   multiple
   name="file"
   type="drag"
   style="display: inline-block;width:58px;"
 >
   <div style="width: 58px; height: 58px; line-height: 58px">
     <Icon type="ios-camera" size="20"></Icon>
   </div>
 </Upload>

window.URL.createObjectURL(new Blob([file]))
创建一个新的对象URL，该对象URL可以代表某一个指定的file对象或者bold对象。
可以用于在浏览器上预览本地的图片或者视频。

// 上传文件之前的钩子 轮播图
handeleBeforeUpSwiperImage(file){
  this.uploadType = "swiperImage"
  this.$refs.cropRef.fileinfo = file
  this.$refs.cropRef.fileName = file.name
  let data = window.URL.createObjectURL(new Blob([file]));
  this.$refs.cropRef.option.img = data
  this.$refs.cropRef.showImage = true
  return false;//取消自动上传
},

安装vue-cropper命令： npm install vue-cropper
图片裁剪组件代码：

<template>
  <div>
    <Modal
      v-model="showImage"
      title="图片裁剪"
      :loading="loading"
      @on-ok="confirmImage()"
      @on-cancel="cancelImage()"
      width="80%"
    >
      <div class="cropper">
        <vue-cropper
          ref="cropper"
          :img="option.img"
          :output-size="option.size"
          :output-type="option.outputType"
          :info="true"
          :can-move="option.canMove"
          :can-move-box="option.canMoveBox"
          :fixed-box="option.fixedBox"
          :auto-crop="option.autoCrop"
          :auto-crop-width="option.autoCropWidth"
          :auto-crop-height="option.autoCropHeight"
          :center-box="option.centerBox"
          :high="option.high"
          :info-true="option.infoTrue"
          @realTime="realTime"
          :enlarge="option.enlarge"
          :fixed="option.fixed"
          :fixed-number="option.fixedNumber"
          :limitMinSize="option.limitMinSize"
          />
      </div>
    </Modal>
  </div>
</template>

<script>
import { VueCropper } from 'vue-cropper'
import axios from "axios"
export default {
  name: "vueCropperModal",
  props: {},
  data() {
    return {
      uploadImage: xxxxxxxxx, //上传图片地址
      showImage: false, // 图片裁剪modal
      option: {
        img: '', // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 0.1, // 裁剪生成图片的质量
        outputType: 'png', // 裁剪生成图片的格式
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 600, // 默认生成截图框宽度
        autoCropHeight: 600, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        full: false,         //false按原比例裁切图片，不失真
        canMoveBox: false, // 截图框能否拖动
        original: true, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        maxImgSize: 2000,    //限制图片最大宽度和高度
      },
      fileinfo:'',
      loading: false, // 防止重复提交
      fileName: '', // 文件名称
      high: false, // 是否按照设备的 dpr 输出等比例图片
    };
  },
  components:{
    VueCropper
  },
  mounted() {},
  methods: {
    // 裁剪时触发的方法，用于实时预览
    realTime (data) {
      // this.previews = data;
    },
    // 确定
    confirmImage() {
      let that = this
      this.$refs.cropper.getCropBlob((data) => {
        // console.log(data,"裁剪后图片")
        that.loading = true
        // 这么写是因为文件转换是异步任务
        let transToFile = async(blob, fileName, fileType) => {
          return new window.File([blob], fileName, {type: fileType})
        }
        // 转换完成后可以将file对象传给接口
        transToFile(data, "image", "image/png").then((res)=> {
          // console.log(res)
          let fileFormData = new FormData(); 
          fileFormData.append('file',res,this.fileName)// 要传的参数
          fileFormData.append('item',"goods")
          const instance = axios.create({
            withCredentials: true // 解决跨域
          })
          instance({
            url: this.uploadImage,
            method: 'POST',
            data: fileFormData,
          }).then(res => {
            that.loading = false
            if(res.data.code != 200){
              this.$message.error(res.data.msg);
            }
            let {fileName} = res.data.obj
            this.$emit("getFile",fileName)
            // console.log(res,'res')
          })
        })
      })
    },
    // 取消
    cancelImage(){
      this.showImage = false;
    },
  },
};
</script>

<style scoped>
.cropper{
  width: auto; // 要设置样式，不然图片展示不出来
  height: 800px;
}
</style>