因为项目中多次用到这个组件 所以就自己封装了下
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
因篇幅问题不能全部显示,请点此查看更多更全内容