vue element上传图片之后对图片支持缩放和裁剪

使用工具：vue   element   ImgCutter   功能描述：限制上传一张图片，上传要在左边框展示，支持预览、裁剪、删除已上传图片，裁剪之后左侧框同步更新
1.下载element  ImgCutter并引入
cnpm i element-ui     
main.js:
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
cnpm install vue-img-cutter
在指定vue文件引入：
import ImgCutter from 'vue-img-cutter'
components: {
    ImgCutter,
  }
2.element结合ImgCutter实现上传图片二次修剪图片
dom:

                    
                      
                      

                        
                        
                        
                          
                          
                            
                          
                          
                          
                            
                          
                          
                          
                            
                          
                        
                      
                    
                    
                      
                    
                    
                      选择图片1
                    
                  
      js:
      data:{
      //用于更新上传组件，解决视图不更新问题
      upLoadRandom: Math.random(),
      //存放图片路径等，初始化展示已上传图片
      fileList:[],
      //图片路径   用于接口传值
      formPic：’‘，
      //上传图片预览图路径
      dialogImageUrl：’‘
}
methods:{
//禁用表单默认上传
   beforeUpload() {
      return false
    },
    //删除图片改变
    handleRemove(file) {
      this.formPic = ''
      this.fileList = []
    },
    //上传图片发接口
    handleQualificationChange(file, fileList) {
      if (!fileList.length) {
        this.fileList = fileList
        this.checkItem.showPics = null
      } else if (this.handleCheckoutFile(fileList[0])) {
        this.fileList = fileList
        setTimeout(() => {
          const file = this.fileList
          this.fileList = []
          this.fileList = file
          let formData = new FormData()
          formData.append('file', this.fileList[0].raw)
          console.log(this.fileList[0].raw, 1111)
          this.handleUploaded(formData).then((res) => {
            this.formPic = res.code === 200 ? res.data : []
            this.form.setFieldsValue({ pics: this.formPic })
          })
        }, 50)
      }
    }，
    //图片大小  格式校验
    handleCheckoutFile(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('图片大小不能超过2MB!')
      }
      return isLt2M
    },
    //预览
    handlePictureCardPreview(file) {
      if (file) {
        this.dialogImageUrl = file.url || file.thumbUrl
      }
      this.dialogVisible = true
    }，
    //裁剪按钮触发展示裁剪弹窗
    handleCutter(file) {
      this.$refs.imgCutterModal.handleOpen({
          name:'货品图片.img',
          src:this.formPic,
          width:400,
          height:400,
        });
    }，
    //裁剪图片之后确认  二次上传裁剪之后图片
    cutDown(fileName){
       let formData = new FormData()
        formData.append('file', fileName.file)
        this.handleUploaded(formData).then((res) => {
          this.formPic = res.code === 200 ? res.data : []
          this.fileList[0].url=this.formPic;
          this.form.setFieldsValue({ pics: this.formPic })
        })
    }
}

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210604105214232.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAyMjU4Ng==,size_16,color_FFFFFF,t_70)