vue element-ui 图片上传组件（带裁剪功能）

效果：


组件：（比较多，这里就不写了，需要的留下邮箱我免费送[工作日] ）

出于某些原因，不会再免费赠送，需要的请自行下载：https://download.csdn.net/download/u013361179/23272081

这里采用FormData上传，有多种上传方法，我们采用的是防止服务器脏数据的处理办法，也就是在点击确定后并没有真正上传到服务器，而是暂存，在没有点击提交表单之前的操作都是在操作暂存区的图片，在点击提交表单后才是真正上传
引入：

import ImgCropper from '@c/ImgCropper/ImgCropper'

components: { ImgCropper }

<ImgCropper :numLimit="5" :imgBaseUrl="IMAGEURL" @change="getImages($event)" @delete="deleteFile($event)" :introduceImg="coverList"></ImgCropper>

//  上传图片（临时上传，此时并没有上传到服务器）
getImages (event) {
  this.fileList.push(event)
}

// 删除图片
    deleteFile(file) {
      if (file && file.id) {
        this.fileList.map(item => {
          if (item.id === file.id) {
            this.fileList.splice(item, 1)
          }
        })
      } else {
        this.fileList = []
      }
    }

//  上传图片（上传图片到服务器，这个方法要在提交表单的时候再调用）
    batchUpload() {
      if (this.fileList.length) {
        const params = new FormData()
        this.fileList.map(item => {
          params.append('files', item.file)
        })
        const res = await ImgServe.uploadBatchImg(params)
        if (res.data.code === 200) {
          res.data.data.map(item => {
            this.updateList.push(item.filePath)
          })
          this.fileList = []
        } else {
          this.$message.warning(res.data.msg)
        }
      }
    }

注意：删除可以和后端商量好，此处的删除是前端提交后覆盖服务器表中数据，所以等于是提交图片后后端会清除掉表中原有图片，重新放进去目前提交的图片（这种方法节省了一个删除接口）