vue3.0?移動端二次封裝van-uploader實現(xiàn)上傳圖片(vant組件庫)
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如何處理Axios多次請求數(shù)據(jù)顯示問題
這篇文章主要介紹了Vue如何處理Axios多次請求數(shù)據(jù)顯示問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01Vue.js watch監(jiān)視屬性知識點總結(jié)
在本篇文章里小編給大家分享的是關(guān)于Vue.js watch監(jiān)視屬性的相關(guān)知識點內(nèi)容,需要的朋友們學習下。2019-11-11關(guān)于Vue-extend和VueComponent問題小結(jié)
這篇文章主要介紹了Vue-extend和VueComponent問題,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08vue框架和react框架的區(qū)別以及各自的應用場景使用
這篇文章主要介紹了vue框架和react框架的區(qū)別以及各自的應用場景使用,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10如何在Vue單頁面中進行業(yè)務數(shù)據(jù)的上報
為什么要在標題里加上一個業(yè)務數(shù)據(jù)的上報呢,因為在咱們前端項目中,可上報的數(shù)據(jù)維度太多,比如還有性能數(shù)據(jù)、頁面錯誤數(shù)據(jù)、console捕獲等。這里我們只講解業(yè)務數(shù)據(jù)的埋點。2021-05-05