vue3.0移動端二次封裝van-uploader實(shí)現(xiàn)上傳圖片的方法

這篇文章主要介紹“vue3.0移動端二次封裝van-uploader實(shí)現(xiàn)上傳圖片的方法”，在日常操作中，相信很多人在vue3.0移動端二次封裝van-uploader實(shí)現(xiàn)上傳圖片的方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue3.0移動端二次封裝van-uploader實(shí)現(xiàn)上傳圖片的方法”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

1、前提：業(yè)務(wù)需求，最多上傳6張圖片，并可以實(shí)現(xiàn)本地預(yù)覽

2、解決方法：使用vant組件庫中的van-uploader實(shí)現(xiàn)

3、代碼實(shí)現(xiàn)

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實(shí)現(xiàn)

import { moment } from '@/common'
const emit = defineEmits(['update:fileList'])

defineProps({
  maxCount: { // 圖片張數(shù)
    type: Number,
    default: 6
  },
  maxSize: { // 圖片大小
    type: Number,
    default: 500 * 1024
  },
  fileType: { // 文件類型
    type: String,
    default: "image/*"
  },
  fileList: { //已上傳的文件列表
    type: Array,
    default: (()=>{
      return []
    })
  },
})

// 文件大小超過限制時觸發(fā)
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()
  // 判斷當(dāng)前上傳幾張圖，一張以上則為數(shù)組結(jié)構(gòu)
  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({
    、、、、發(fā)起后端上傳圖片接口請求
  })
  if (res) {
    emit("update:fileList", res.data) 
  }
}

4、實(shí)現(xiàn)的效果圖

到此，關(guān)于“vue3.0移動端二次封裝van-uploader實(shí)現(xiàn)上傳圖片的方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！