vant3+ts 封装uploader上传图片组件

因为项目中多次用到这个组件 所以就自己封装了下

vant的组件需要在

：after-read 之后把图片上传到服务器

手机上选择或者拍照 返回的格式是[{name:xxx，data:base64，xxxxx},{name:xxx,data:base64，xxxxx}]

而 组件的回显是根据flie对象或者URL

所以就需要上传前 把 返回的base64转成file对象

图片上传到接口前还需要把图片压缩一遍

 整个组件的代码如下

公司的上传图片的逻辑是 第一步，把fileNames 上传到后台提供的接口 返回的格式是{url:xxx,path:xxx,contentType:xxx},第二步，把返回的url put请求把file对象传到后台才算是请求成功，第三步，在拿第一步返回的path传到后台返回图片的URL（我这里回显根据的是url）

代码里count 是等接口都请求完了才给父组件传值

<template>
  <van-uploader v-model="imgList" :max-count="limit" :multiple="multiple" :before-delete="beforeDeleteBack"
    :after-read="afterRead" :accept="fileType" :disabled="disabled" @click-upload="handleClick" />

</template>
<script lang="ts" setup>
import { reactive, ref, toRefs, watch, nextTick, unref } from &#