【Vue】FormData上传整合cropperjs图片裁剪

前言

我感觉上传这部分是一个比较碎片的知识点了，所以当时在做上传的模块的时候尽量做了一些整合，鉴于大部分上传都需要实现上传，展示等功能，所以这部分基本会囊括到，如果是需要裁剪的话请先：

npm i cropperjs -S

secdra的上传页面在这
http://www.secdra.com/upload

正文

首先贴上上传的dom

<div class="card upload-card" @dragover.prevent="_=>{}" @drop.prevent="upload($event,'drop')">
        <div class="image-box flex-box">
          <div class="upload-box" v-if="!drawUrl">
            <Btn type="file" color="primary" @change="upload($event,'button')">上传图片</Btn>
            <h3>拖拽一个图片到这里上传</h3>
            <p>支持jpg、png、jpeg格式</p>
          </div>
          <div class="view-box" v-if="drawUrl">
            <label class="flex-box">
              <img :src="drawUrl" :style="{height:proportion>=1?`100%`:`auto`,width:proportion<=1?`100%`:`auto`}">
              <input type="file" style="display: none" @change="upload($event,'button')">
            </label>
          </div>
        </div>
      </div>

接下来我们关注upload这个方法

 async upload($event, type) {
   
        let fil