亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue3.0?移動(dòng)端二次封裝van-uploader實(shí)現(xiàn)上傳圖片(vant組件庫(kù))

 更新時(shí)間:2022年05月21日 10:25:16   作者:Smile_zxx  
這篇文章主要介紹了vue3.0?移動(dòng)端二次封裝van-uploader上傳圖片組件,此功能最多上傳6張圖片,并可以實(shí)現(xiàn)本地預(yù)覽,實(shí)現(xiàn)代碼簡(jiǎn)單易懂,需要的朋友可以參考下

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

在這里插入圖片描述

2、解決方法:使用vant組件庫(kù)中的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 []
    })
  },
})

// 文件大小超過(guò)限制時(shí)觸發(fā)
function onOversize(file){
    console.log("請(qǐng)上傳小于10M的圖片")
}

// 上傳前置處理
function beforeRead (file) {
  if(Array.isArray(file)) {
    file.forEach(item => {
      if (item.type !== 'image/jpeg') {
          console.log("請(qǐng)上傳 image 格式圖片")
          return false
        }
    })
    if (file.type !== 'image/jpeg') {
		console.log("請(qǐng)上傳 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ā)起后端上傳圖片接口請(qǐng)求
  })
  if (res) {
    emit("update:fileList", res.data) 
  }
}

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

在這里插入圖片描述

到此這篇關(guān)于vue3.0 移動(dòng)端二次封裝van-uploader上傳圖片組件的文章就介紹到這了,更多相關(guān)vue3.0 van-uploader上傳圖片組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue如何對(duì)一個(gè)數(shù)據(jù)過(guò)濾出想要的item

    vue如何對(duì)一個(gè)數(shù)據(jù)過(guò)濾出想要的item

    這篇文章主要介紹了vue如何對(duì)一個(gè)數(shù)據(jù)過(guò)濾出想要的item問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue腳手架學(xué)習(xí)之項(xiàng)目創(chuàng)建方式

    Vue腳手架學(xué)習(xí)之項(xiàng)目創(chuàng)建方式

    這篇文章主要給大家介紹了關(guān)于Vue腳手架學(xué)習(xí)之項(xiàng)目創(chuàng)建方式的相關(guān)資料,文中通過(guò)介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-03-03
  • Vue如何處理Axios多次請(qǐng)求數(shù)據(jù)顯示問(wèn)題

    Vue如何處理Axios多次請(qǐng)求數(shù)據(jù)顯示問(wèn)題

    這篇文章主要介紹了Vue如何處理Axios多次請(qǐng)求數(shù)據(jù)顯示問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • Vue-resource安裝過(guò)程及使用方法解析

    Vue-resource安裝過(guò)程及使用方法解析

    這篇文章主要介紹了Vue-resource安裝過(guò)程及使用方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-07-07
  • 使用vue實(shí)現(xiàn)HTML頁(yè)面生成圖片的方法

    使用vue實(shí)現(xiàn)HTML頁(yè)面生成圖片的方法

    這篇文章主要介紹了使用vue實(shí)現(xiàn)HTML頁(yè)面生成圖片的相關(guān)知識(shí),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-03-03
  • Vue.js watch監(jiān)視屬性知識(shí)點(diǎn)總結(jié)

    Vue.js watch監(jiān)視屬性知識(shí)點(diǎn)總結(jié)

    在本篇文章里小編給大家分享的是關(guān)于Vue.js watch監(jiān)視屬性的相關(guān)知識(shí)點(diǎn)內(nèi)容,需要的朋友們學(xué)習(xí)下。
    2019-11-11
  • 解決vue打包c(diǎn)ss文件中背景圖片的路徑問(wèn)題

    解決vue打包c(diǎn)ss文件中背景圖片的路徑問(wèn)題

    今天小編就為大家分享一篇解決vue打包c(diǎn)ss文件中背景圖片的路徑問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • 關(guān)于Vue-extend和VueComponent問(wèn)題小結(jié)

    關(guān)于Vue-extend和VueComponent問(wèn)題小結(jié)

    這篇文章主要介紹了Vue-extend和VueComponent問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-08-08
  • vue框架和react框架的區(qū)別以及各自的應(yīng)用場(chǎng)景使用

    vue框架和react框架的區(qū)別以及各自的應(yīng)用場(chǎng)景使用

    這篇文章主要介紹了vue框架和react框架的區(qū)別以及各自的應(yīng)用場(chǎng)景使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • 如何在Vue單頁(yè)面中進(jìn)行業(yè)務(wù)數(shù)據(jù)的上報(bào)

    如何在Vue單頁(yè)面中進(jìn)行業(yè)務(wù)數(shù)據(jù)的上報(bào)

    為什么要在標(biāo)題里加上一個(gè)業(yè)務(wù)數(shù)據(jù)的上報(bào)呢,因?yàn)樵谠蹅兦岸隧?xiàng)目中,可上報(bào)的數(shù)據(jù)維度太多,比如還有性能數(shù)據(jù)、頁(yè)面錯(cuò)誤數(shù)據(jù)、console捕獲等。這里我們只講解業(yè)務(wù)數(shù)據(jù)的埋點(diǎn)。
    2021-05-05

最新評(píng)論