vue3.0移动端二次封装van-uploader实现上传图片的方法

这篇文章主要介绍“vue3.0移动端二次封装van-uploader实现上传图片的方法”，在日常操作中，相信很多人在vue3.0移动端二次封装van-uploader实现上传图片的方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue3.0移动端二次封装van-uploader实现上传图片的方法”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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

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

代码实现

template

  <div class="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'const emit = 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 []    })  },})// 文件大小超过限制时触发function onOversize(file){    console.log("请上传小于10M的图片")}// 上传前置处理function beforeRead (file) {  if(Array.isArray(file)) {    file.forEach(item => {      if (item.type !== 'image/jpeg') {          console.log("请上传 image 格式图片")          return false        }    })    if (file.type !== 'image/jpeg') {console.log("请上传 image 格式图片")      return false    }  }  return true}async function onRead(file){  let content = file  let forms = new FormData()  // 判断当前上传几张图，一张以上则为数组结构  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')}/`)  }  let res = await axios.post({    、、、、发起后端上传图片接口请求  })  if (res) {    emit("update:fileList", res.data)   }}

实现的效果图

到此，关于“vue3.0移动端二次封装van-uploader实现上传图片的方法”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！