vue3.0移动端二次封装van-uploader实现上传图片的方法(van-uploader,vue,开发技术)

1、前提：业务需求，最多上传6张图片，并可以实现本地预览

2、解决方法：使用vant组件库中的van-uploader实现

3、代码实现

template

<divclass="upload-oss"><van-uploader:after-read="onRead":before-read="beforeRead":accept="fileType"v-model="fileList"multiple:max-count="maxCount":max-size="maxSize"@oversize="onOversize"></van-uploader></div>

js实现

import{moment}from'@/common'constemit=defineEmits(['update:fileList'])defineProps({maxCount:{//图片张数type:Number,default:6},maxSize:{//图片大小type:Number,default:500*1024},fileType:{//文件类型type:String,default:"image/*"},fileList:{//已上传的文件列表type:Array,default:(()=>{return[]})},})//文件大小超过限制时触发functiononOversize(file){console.log("请上传小于10M的图片")}//上传前置处理functionbeforeRead(file){if(Array.isArray(file)){file.forEach(item=>{if(item.type!=='image/jpeg'){console.log("请上传image格式图片")returnfalse}})if(file.type!=='image/jpeg'){ console.log("请上传image格式图片")returnfalse}}returntrue}asyncfunctiononRead(file){letcontent=fileletforms=newFormData()//判断当前上传几张图，一张以上则为数组结构if(Array.isArray(content)){content.forEach(item=>{forms.append("file",item.file)forms.append('filePath',`pc/client-${moment().format('YYYY-MM-DD')}/`)})}else{forms.append("file",content.file)forms.append('filePath',`pc/client-${moment().format('YYYY-MM-DD')}/`)}letres=awaitaxios.post({、、、、发起后端上传图片接口请求})if(res){emit("update:fileList",res.data)}}

4、实现的效果图