vue3.0?移動端二次封裝van-uploader實(shí)現(xiàn)上傳圖片(vant組件庫)
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)文章
el-form錯(cuò)誤提示信息手動添加和取消的示例代碼
這篇文章主要介紹了el-form錯(cuò)誤提示信息手動添加和取消,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08解決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)展示與交互的方法詳解(如熱力圖)
隨著大數(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-07vue?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)篇,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11Vue基于localStorage存儲信息代碼實(shí)例
這篇文章主要介紹了Vue基于localStorage存儲信息代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11vue表單驗(yàn)證自定義驗(yàn)證規(guī)則詳解
這篇文章主要為大家詳細(xì)介紹了vue表單驗(yàn)證自定義驗(yàn)證規(guī)則,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03