文件上传(WebUploader)成功之前自定义裁剪(vue-img-cutter)，上传裁剪的图片，并兼容ie

上传文件使用的是WebUploader，可 分片、并发、文件体积大时支持MD5秒传
地址：http://fex.baidu.com/webuploader/
思路： 初始化上传组件，使用vue-img-cutter的裁剪；在裁剪成功之后；为兼容ie, 将裁剪获得的base64Url格式的图片地址转成bolo文件，追加到上传队列之中；调用上传方法继续进行上传，以确保上传的是裁剪后的图片
使用方法：
第一步：先引用webuploader.js，建议下载下来放在本地直接使用
安装依赖vue-img-cutter并引用
第二步：初始化webUploader
代码如下

<template>
  <div class="logoF1 fl">
    <div>
      <ImgCutter @cutDown="cutDown" label="上传LOGO"
        :cutWidth="180"
        :cutHeight="40"
        :moveAble="true"
        :sizeChange="false"
        WatermarkText=""></ImgCutter>
     </div>
     <div class="upload-wrap" v-show="false">
       <div id="uploader" class="wu-example">
          <div class="btns">
             <div id="picker" class="up-btn">上传LOGO</div>
             </div>
          </div>
      </div>
    </div>
  </div>
</template>
import ImgCutter from 'vue-img-cutter'
import webuploader from '@/utils/webuploader.js'
export default {
  components: {
    ImgCutter
  },
  data () {
    return {
      ruleForm: {
        logoUrl: '',
        logoId: ''
      },
      uploader: null, // 文件
      cropperFiles: [], // 裁剪之后的文件
    }
  },
  mounted () {
  this.init()
  },
  methods () {
    cutDown (res) {
      this.logoFileName = res.fileName
      // 裁剪之后base64Url 转成流文件
      let blob = this.dataURLtoBlob(res.dataURL)
      this.fileList = res.dataURL
      // 将流追加进队列
      this.uploader.addFiles(blob)
    },
    init () {
      // 初始化webuploader
      this.uploader = webuploader.create({
        // 选择文件的按钮
        pick: '#picker',
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        compress: false,
        // 是否开启大文件分片上传，默认为true
        chunked: true,
        // 分片上传线程数，默认为3，如果使用断点续传建议线程数改为1
        threads: 1,
        // 如果某个分片由于网络问题出错，允许自动重传多少次，默认为2
        chunkRetry: 2,
        // 每一片的大小，默认为10M
        chunkSize: 1024 * 1024 * 10,
        // 上传超时时间，默认为2分钟
        timeout: 15 * 60 * 1000,
        // 是否允许同一个文件重复上传，默认为false
        duplicate: true,
        // 非官方参数，文件大小超过该值则进行分片，默认为10M
        thresholdSize: 1024 * 1024 * 10,
        // 非官方参数，是否支持切换至阿里云，有特殊需求的项目可以开通此项，需要进行授权，默认为false
        uploadToThirdPartyStorage: false,
        // 非官方参数，是否开启秒传，默认为true，强烈建议开启。秒传关闭情况，阿里云分片上传默认无MD5
        checkMd5: true
      })
      let _this = this
      // 上传文件之前
      this.uploader.on('beforeFileQueued', function (file) {
        let type = ['bmp', 'gif', 'png', 'jpg', 'jpeg']
        let size = 10485760
        _this.file = file
        // 校验校验类型
        if (type && type.indexOf(file.ext.toLowerCase()) === -1) {
          _this.$message.info({
            message: '文件格式错误，请重新选择上传！',
            offset: 100
          })
          return false
        }
        // 检验文件大小
        if (file.size === 0) {
          _this.$message.info({
            message: `不得上传空文件`,
            offset: 100
          })
          return false
        }
        if (file.size > size) {
          _this.$message.info({
            message: `文件不得大于10M`,
            offset: 100
          })
          return false
        }

        _this.fileName = file.name
        return true
      })
      // 当上传的文件加入队列以后触发
      this.uploader.onFileQueued = function (file) {
        _this.cropperFiles = []
        file.name = _this.logoFileName
        // upload()开始上传。此方法可以从初始状态调用开始上传流程，也可以从暂停状态调用，继续上传流程
        _this.uploader.upload()
      }
      // 上传成功
      this.uploader.on('uploadSuccess', function (file) {
        // 将上传的文件放在裁剪文件列表中
        _this.cropperFiles = [{
          fileId: file.id,
          fileType: file.ext,
          fileSize: file.size,
          fileName: _this.logoFileName,
          percentage: 100, // 进度完成
          fileUrl: file.url,
          id: file.contextId
        }]
        _this.filesLogo = _this.cropperFiles
        _this.ruleForm.logoUrl = _this.filesLogo[0].fileUrl
        _this.ruleForm.logoId = _this.filesLogo[0].id
        _this.showCropee = false
      })
      // 上传过程中进度显示
      this.uploader.on('uploadProgress', function (file, percentage) {
        _this.cropperFiles = [{
          percentage: percentage
        }]
      })
    },
  }
}

如有其他文件裁剪并上传的方法，希望大家告知，以供学习；先说谢谢了