vue3.0 移动端二次封装van-uploader实现上传图片(vant组件库)

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

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

3、代码实现

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) 
  }
}

4、实现的效果图

到此这篇关于vue3.0 移动端二次封装van-uploader上传图片组件的文章就介绍到这了,更多相关vue3.0 van-uploader上传图片组件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！