h5,pc管理上传图片（vue-cropper裁剪）

1.h5上传(vantUI)

 <van-uploader :before-read="beforeRead">
   <span>选择图片</span>
</van-uploader>

2.h5对应方法

 beforeRead (file) {
      if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
        this.$toast('请上传 jpg/png 格式图片')
        return false
      }
      this.showCropper = true
      this.imageToBase64(file)
      this.imageFileName = file.name
    },
    imageToBase64 (file) {
      let reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        this.option.img = reader.result
      }
    },
    getCropBlob () {
      let formData = new FormData()
      this.$refs.cropper.getCropBlob((data) => {
        formData.append('headFile', data, this.imageFileName)
        formData.append('id', this.$store.getters.userId)
        uploadAva(formData).then((res) => {
          // 返回图片路径
        })
      })
    }

1.pc上传(elementUI)

   // http-request 覆盖默认的上传行为，可以自定义上传的实现
    <el-upload class="avatar-uploader" :show-file-list="false" action :http-request="upload">
          <img :src="imgUrl">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>

2.pc方法

 upload(data) {
  if (data.file.type.indexOf('image') === -1) {
    this.$message.info('请选择图片文件')
    return
  }
  this.imgUrl = URL.createObjectURL(data.file) // 转为base64
  this.showImg = !this.showImg //展开裁剪弹框
},
// 裁剪的确定事件
 handleClickUpload() {
  this.$refs.cropper.getCropBlob((data) => {
    this.$emit('confirm', data) // 返回blob 数据
    this.$emit('input', false)
  })
}