您的当前位置:首页vant3+ts 封装uploader上传图片组件

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

2023-07-13 来源:小侦探旅游网

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

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, r

因篇幅问题不能全部显示,请点此查看更多更全内容