vue3.0?移動(dòng)端二次封裝van-uploader實(shí)現(xiàn)上傳圖片(vant組件庫(kù))
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問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Vue腳手架學(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-03Vue如何處理Axios多次請(qǐng)求數(shù)據(jù)顯示問(wèn)題
這篇文章主要介紹了Vue如何處理Axios多次請(qǐng)求數(shù)據(jù)顯示問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01使用vue實(shí)現(xiàn)HTML頁(yè)面生成圖片的方法
這篇文章主要介紹了使用vue實(shí)現(xiàn)HTML頁(yè)面生成圖片的相關(guān)知識(shí),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03Vue.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)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09關(guān)于Vue-extend和VueComponent問(wèn)題小結(jié)
這篇文章主要介紹了Vue-extend和VueComponent問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08vue框架和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)
為什么要在標(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