超详细各类文件上传

各类文件上传遇到的情况

（情况一）使用各类ui组件上传，这里以element plus的upload组件来说

//	这里我们列举了最基本的功能，其中action配置为后端提供的上传接口地址
<el-upload
  	  v-model="fileList"
     :action="uploadFileServerUrl"
     :on-success="handleUploadSuccess"
   >
     <el-button
       @click="smallFileUpload"
     >选取文件</el-button>
     </template>
 </el-upload>

这里上传成功会返回两个东西，
一个是后端提供接口请求成功后的res信息=====》res

一个是上传的源文件信息（这个也很重要，用于后期需要再对源文件进行操作）=====》file

let originFile = null
const handleUploadSuccess = (res, file) => {
  originFile = file.raw
  if (res.code === 200) {
   //	XXXXXXXXXXXX
  } 
}

到这里就可以，就是正常请求的过程了

（情况二）我们需要手动调用接口，来上传

前言：基于我们的第一种情况，使用了组件的自动上传功能，那么如果说后续还要继续对我们上传的文件进行其他操作呢，
在这里给，工作中给我们提出了一个需求，例如：上传了一个图片，那么后期可以手动可选择性的对图片进行切边，去除屏幕纹等操作，

那么这些操作是需要我们再次调用后端接口，并且需要需要传递参数为fie（binary）格式的

重点就来了，那么 我们之前保存的源文件信息就大有用处了

这里我们做一个对原图片进行切边增强的处理，来调用接口测试下

let originFile = null
const handleUploadSuccess = (res, file) => {
  originFile = file.raw
}

拿到后值这样的源文件信息

老样子，这里我们需要对源文件信息，进行一个转化

originFile为上一步我们拿到的源文件

 	let formData = new FormData();
    formData.append('file', originFile)
    let res = await imageTrimming(formData)

这里我们调用接口成功，后端不在给我们返回url，而是返回base64

重中之重来了，这里如果说这个我们完成了对图片切边，（后端返回为base64），接下来我们要在对图片切边的基础上，在进一步处理，例如去除屏幕纹。（接口参数和图片切边接口参数格式一致为binary）

准备工作：需要提取文件参数，问题点就是我们如何对后端返回回来的base64转成file（binary）格式呢
这里直接封装了一个方法，上代码，直接复用

// base64转换file
const base64ToFile = (base64, fileName) => {
  let arr = base64.split(",");
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  let file = new File([u8arr], fileName, { type: 'jpeg' })
  let formData = new FormData()
  formData.append('file', file)
  //	接下来就是调用接口了
  //	XXXXX
  //	完事
}

除了转换方式变了一下其他请求方式不变，到这里我们就成功了，成功对图片做了进一步操作，也符合接口请求参数格式