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

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

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

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

在這里插入圖片描述

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

3、代碼實現(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實現(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()
  // 判斷當前上傳幾張圖,一張以上則為數(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、實現(xiàn)的效果圖

在這里插入圖片描述

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

相關(guān)文章

  • vue如何對一個數(shù)據(jù)過濾出想要的item

    vue如何對一個數(shù)據(jù)過濾出想要的item

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

    Vue腳手架學習之項目創(chuàng)建方式

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

    Vue如何處理Axios多次請求數(shù)據(jù)顯示問題

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

    Vue-resource安裝過程及使用方法解析

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

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

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

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

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

    解決vue打包css文件中背景圖片的路徑問題

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

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

    這篇文章主要介紹了Vue-extend和VueComponent問題,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-08-08
  • vue框架和react框架的區(qū)別以及各自的應用場景使用

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

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

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

    為什么要在標題里加上一個業(yè)務數(shù)據(jù)的上報呢,因為在咱們前端項目中,可上報的數(shù)據(jù)維度太多,比如還有性能數(shù)據(jù)、頁面錯誤數(shù)據(jù)、console捕獲等。這里我們只講解業(yè)務數(shù)據(jù)的埋點。
    2021-05-05

最新評論