element-ui图片裁剪和图片上传

<template>
<el-form-item label="课程图片">
  <el-upload
    class="avatar-uploader"
    action="http://106.13.150.219:8090/api/Common/CommonMethod/PostUploadImageList"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</el-form-item>

<el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body>
  <div class="cropper-content">
    <div class="cropper" style="text-align:center">
      <vueCropper
        ref="cropper"
        :img="option.img"
        :outputSize="option.outputSize"
        :outputType="option.outputType"
        :info="option.info"
        :canScale="option.canScale"
        :autoCrop="option.autoCrop"
        :autoCropWidth="option.autoCropWidth"
        :autoCropHeight="option.autoCropHeight"
        :fixed="option.fixed"
        :fixedBox="option.fixedBox"
        :fixedNumber="option.fixedNumber"
      ></vueCropper>
    </div>
  </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>

  </div>
</template>

<script>
//引入插件
import {VueCropper} from 'vue-cropper'

export default {
  name: "ImageUpload",
  components: {
    VueCropper
  },

  data() {
    return {
      //控制是否在upload框里显示图片
      isShowImageUrl: false,
      imageUrl: '',
      dialogVisible: false,
      // 裁剪组件的基础配置option
      option: {
        img: '', // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 0.8, // 裁剪生成图片的质量
        outputType: 'jpeg', // 裁剪生成图片的格式
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 200, // 默认生成截图框宽度
        autoCropHeight: 200, // 默认生成截图框高度
        fixedBox: false, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMoveBox: false, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        canMove: true,
      },
      picsList: [],  //页面显示的数组
      // 防止重复提交
      loading: false,
     
    }
  },
  methods: {
    // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
    //选中文件夹中的图片,点击打开的时候会触发这个函数，来判断选择的图片是否符合方法中对于图片格式的要求
    beforeAvatarUpload(file) {
      console.log('上传的文件----' + file)
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //文件上传成功时的钩子
    //这个方法在什么时候执行呢？
    //
    handleAvatarSuccess(res, file) {
      //上传成功后将图片地址赋值给裁剪框显示图片
      //res中包含的是action="http://106.13.150.219:8090/api/Common/CommonMethod/PostUploadImageList"
      //上面的接口返回的数据，成功/失败
      //包括服务器返回的信息，包含文件临时存放路径等信息
      console.log(res)
      //找到临时路径url
      console.log(res.Data[0].url)
      //保存临时路径
      this.imageUrl = res.Data[0].url
      //在upload框中显示图片
      this.isShowImageUrl = true
      //file中包含的是文件信息
      //关于上传的图片的具体信息，并且包含uid这个属性
      console.log(file)
      console.log(file.raw)
      this.$nextTick(() => {
        this.option.img = URL.createObjectURL(file.raw);
     
        this.dialogVisible = true
      })
    },

    // finish() {
    //   this.$refs.cropper.getCropData((data) => {
    //     //data里面包含的是裁剪后的图片大小和类型,当然类型不会改变啦
    //     // console.log(data)
    //     let formData = new FormData()
    //     formData.append("file", data)
    //     imageUpload(formData).then(res => {
    //       console.log(res)
    //     })
    //   })
    // },
    finish() {
      // 裁剪后获取blob对象（二进制文件对象）
      this.$refs.cropper.getCropBlob((data) => {
        // 前端裁剪图片后获取的实际是blob对象，后端统一的文件上传接口实际接收的file对象，前端需要在数据提交前将blob对象转为file对象。转换方法如下：
        const file = new File([data],"file_0.jpg",{type:data.type, lastModified: Date.now()})
        // 请求拦截器中的处理FormData 需要这个格式也可自行处理
        let image = {'file_0':file}
        this.loading = true
        //上传服务器
        this.$axios.post('http://106.13.150.219:8090/api/Common/CommonMethod/PostUploadImageList',image).then(res=>{

this.imageUrl = res[0].url
this.loading = false
this.dialogVisible = false

})
     
      })
    }


  }

}
</script>

<style scoped>
h1 {
  margin-bottom: 30px;
}

.avatar {
  height: 100%;
  width: 100%;
}

.avatar-uploader {
  background: lightblue !important;
  width: 150px;
  height: 150px;
  text-align: center;
  line-height: 150px;
}

.el-icon-plus {
  width: 150px;
  height: 150px;
  font-size: 30px;
}

.cropper-content {
  width: 500px;
  height: 500px;
  background: pink;
}

.cropper {
  width: 500px;
  height: 500px;
  background: yellow;
}
</style>