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:
<div class="ipt">
                    <el-upload
                      :limit="1"
                      action=""
                      :auto-upload="false"
                      accept="image/jpeg,image/png"
                      :key="upLoadRandom"
                      :file-list="fileList"
                      :before-upload="beforeUpload"
                      list-type="picture-card"
                      :on-remove="handleRemove"
                      :on-change="handleQualificationChange"
                      v-decorator="[
                        'pics',
                        {
                          initialValue: isAdd ? '' : checkItem.showPics,
                          rules: [
                            { required: true, message: '请上传图片' },
                            {
                              validator: this.validFunction,
                            },
                          ],
                        },
                      ]"
                    >
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="file" slot-scope="{ file }">
                        <!-- 图片 -->
                        <img
                          v-if="formPic"
                          class="el-upload-list__item-thumbnail"
                          :src="file.url"
                          alt=""
                        />
                        <span class="el-upload-list__item-actions">
                          <!-- 预览 -->
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                          >
                            <i class="el-icon-zoom-in"></i>
                          </span>
                          <!-- 裁剪 -->
                          <span @click="handleCutter(file)">
                            <i class="el-icon-crop"></i>
                          </span>
                          <!-- 删除 -->
                          <span
                            class="el-upload-list__item-delete"
                            @click="handleRemove(file)"
                          >
                            <i class="el-icon-delete"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="" />
                    </el-dialog>
                    <ImgCutter
                      :showChooseBtn="false"
                      :cross-origin="true"
                      crossOriginHeader="anonymous"
                      tool-bgc="none"
                      :is-modal="true"
                      :show-choose-btn="true"
                      :lock-scroll="true"
                      :box-width="1800"
                      :box-height="600"
                      :cut-width="200"
                      :cut-height="200"
                      :size-change="true"
                      :move-able="true"
                      ref="imgCutterModal"
                      @cutDown="cutDown"
                    >
                      <el-button slot="open" type="primary"
                        >选择图片1</el-button
                      >
                    </ImgCutter>
                  </div>
      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)