欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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 []
    })
  },
})

// 文件大小超過限制時(shí)觸發(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上傳圖片組件的文章就介紹到這了,更多相關(guān)vue3.0 van-uploader上傳圖片組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue全屏事件開發(fā)詳解

    vue全屏事件開發(fā)詳解

    這篇文章主要為大家詳細(xì)介紹了vue全屏事件的開發(fā)過程,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-03-03
  • el-form錯(cuò)誤提示信息手動添加和取消的示例代碼

    el-form錯(cuò)誤提示信息手動添加和取消的示例代碼

    這篇文章主要介紹了el-form錯(cuò)誤提示信息手動添加和取消,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-08-08
  • Vue.js雙向綁定操作技巧(初級入門)

    Vue.js雙向綁定操作技巧(初級入門)

    這篇文章主要介紹了Vue.js雙向綁定操作技巧(初級入門)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-12-12
  • 解決Vue3+ts項(xiàng)目打包時(shí)報(bào)錯(cuò)的問題

    解決Vue3+ts項(xiàng)目打包時(shí)報(bào)錯(cuò)的問題

    這篇文章主要介紹了解決Vue3+ts項(xiàng)目打包時(shí)報(bào)錯(cuò)的問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2025-06-06
  • 在Vue中實(shí)現(xiàn)地圖熱點(diǎn)展示與交互的方法詳解(如熱力圖)

    在Vue中實(shí)現(xiàn)地圖熱點(diǎn)展示與交互的方法詳解(如熱力圖)

    隨著大數(shù)據(jù)和可視化技術(shù)的發(fā)展,地圖熱點(diǎn)展示越來越受到人們的關(guān)注,在Vue應(yīng)用中,我們通常需要實(shí)現(xiàn)地圖熱點(diǎn)的展示和交互,以便更好地呈現(xiàn)數(shù)據(jù)和分析結(jié)果,本文將介紹在Vue中如何進(jìn)行地圖熱點(diǎn)展示與交互,包括熱力圖、點(diǎn)聚合等
    2023-07-07
  • vue?codemirror實(shí)現(xiàn)在線代碼編譯器效果

    vue?codemirror實(shí)現(xiàn)在線代碼編譯器效果

    這篇文章主要介紹了vue-codemirror實(shí)現(xiàn)在線代碼編譯器?,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2021-12-12
  • 詳解vuex之store拆分即多模塊狀態(tài)管理(modules)篇

    詳解vuex之store拆分即多模塊狀態(tài)管理(modules)篇

    這篇文章主要介紹了詳解vuex之store拆分即多模塊狀態(tài)管理(modules)篇,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-11-11
  • 使用vue.js編寫藍(lán)色拼圖小游戲

    使用vue.js編寫藍(lán)色拼圖小游戲

    之前在網(wǎng)上看到《藍(lán)色拼圖》這款小游戲,作者是用jquery寫的。下面通過本文給大家分享基于vue.js編寫藍(lán)色拼圖小游戲,一起看看實(shí)現(xiàn)代碼吧
    2017-03-03
  • Vue基于localStorage存儲信息代碼實(shí)例

    Vue基于localStorage存儲信息代碼實(shí)例

    這篇文章主要介紹了Vue基于localStorage存儲信息代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-11-11
  • vue表單驗(yàn)證自定義驗(yàn)證規(guī)則詳解

    vue表單驗(yàn)證自定義驗(yàn)證規(guī)則詳解

    這篇文章主要為大家詳細(xì)介紹了vue表單驗(yàn)證自定義驗(yàn)證規(guī)則,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03

最新評論