利用uni-app和uView實(shí)現(xiàn)多圖上傳功能全過(guò)程
前言
最近使用uni-app開(kāi)發(fā)一個(gè)多平臺(tái)的小項(xiàng)目,項(xiàng)目需要多圖上傳,uni-app前端UI框架使用了uView UI
。結(jié)合uView的Upload組件,實(shí)現(xiàn)了多圖上傳功能,多圖上傳可以限制上傳的個(gè)數(shù),以及選擇設(shè)為封面功能。
效果圖
上傳初始狀態(tài):
上傳圖片:
uView Upload組件
先來(lái)認(rèn)識(shí)一下uView的Upload組件。Upload組件用于圖片上傳場(chǎng)景。Upload組件支持如下平臺(tái)
- APP
- H5
- 各家小程序
Upload組件支持手動(dòng)上傳與自動(dòng)上傳,可以限制圖片大小以及圖片數(shù)量??梢耘渲蒙蟼髑暗你^子與刪除文件前的鉤子,靈活性還是比較大的。有興趣的可以去看下相關(guān)的組件文檔,這里就不多做介紹了。
view部分
不多廢話,來(lái)到正文:
圖片上傳一般可以單獨(dú)使用,也可以跟其他form組件放在一起,示例中其他組件的使用不在本篇內(nèi)容范疇內(nèi),所以一行代碼用以表示。只展示主要代碼。
<view class="container"> <view class="font-size-16 text-9B9B9B margin-top-10">上傳圖片</view> <view class="text-9B9B9B">圖片寬度和高度都不能低于500像素,至少3張,最多15張!</view> <u-form-item label="" v-show="false" :border-bottom="false" prop="coverImage"> <u-input v-model="form.coverImage" :disabled="false" placeholder=""></u-input> </u-form-item> </view>
這段代碼定義了上傳圖片的提示文字,以及封面圖!
<view class="container padding-vertical-15"> <view class="pre-box"> <block v-for="(item, index) in imageList" :key="index"> <view class="pre-item"> <image class="pre-item-image" :src="item.url" mode="aspectFill"></image> <view class="u-delete-icon" @click="deleteItem(index)"> <u-icon name="close" size="20" color="#ffffff"></u-icon> </view> <view class="default-image-box"> <u-checkbox shape="circle" v-model="item.checked" labelColor="#FFFFFF" active-color="#19be6b" label-size="24" :name="index" size="24" @change="setDefault(index)">設(shè)為封面</u-checkbox> </view> <view class="default-image-box-mask"></view> </view> </block> <view class="pre-item"> <u-upload ref="imageUpload" :action="imageUploadUrl" :show-tips="false" :disabled="hiddImageUpload" :auto-upload="true" :max-count="imageMaxCount" :upload-text="imageUploadText" :show-upload-list="false" @on-success="imageUploadSuccess" @on-error="uploadError"> <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150"> <u-icon name="camera" size="60" :color="$u.color['lightColor']"></u-icon> <view>{{imageUploadText}}</view> </view> </u-upload> </view> </view> </view>
這段代碼中,定義了上傳成功后的圖片預(yù)覽、以及上傳組件的展示。圖片列表里,還有設(shè)為封面的功能。
完整代碼:
<template> <view> <u-form :model="form" ref="uForm" :rules="rules" :error-type="errorType"> <u-form-item label="表單項(xiàng)" label-width="160rpx" :border-bottom="true"> //... </u-form-item> <!--圖片上傳--> <view class="container"> <view class="font-size-16 text-9B9B9B margin-top-10">上傳圖片</view> <view class="text-9B9B9B">圖片寬度和高度都不能低于500像素,至少3張,最多15張!</view> <u-form-item label="" v-show="false" :border-bottom="false" prop="coverImage"> <u-input v-model="form.coverImage" :disabled="false" placeholder=""></u-input> </u-form-item> </view> <view class="container padding-vertical-15"> <view class="pre-box"> <block v-for="(item, index) in imageList" :key="index"> <view class="pre-item"> <image class="pre-item-image" :src="item.url" mode="aspectFill"></image> <view class="u-delete-icon" @click="deleteItem(index)"> <u-icon name="close" size="20" color="#ffffff"></u-icon> </view> <view class="default-image-box"> <u-checkbox shape="circle" v-model="item.checked" labelColor="#FFFFFF" active-color="#19be6b" label-size="24" :name="index" size="24" @change="setDefault(index)">設(shè)為封面</u-checkbox> </view> <view class="default-image-box-mask"></view> </view> </block> <view class="pre-item"> <u-upload ref="imageUpload" :action="imageUploadUrl" :show-tips="false" :disabled="hiddImageUpload" :auto-upload="true" :max-count="imageMaxCount" :upload-text="imageUploadText" :show-upload-list="false" @on-success="imageUploadSuccess" @on-error="uploadError"> <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150"> <u-icon name="camera" size="60" :color="$u.color['lightColor']"></u-icon> <view>{{imageUploadText}}</view> </view> </u-upload> </view> </view> </view> <!--/圖片上傳--> <u-form-item label="表單項(xiàng)" label-width="160rpx" :border-bottom="true"> //... </u-form-item> </u-form> </view> </template>
上傳代碼片段前后都定義了一個(gè)form-item組件,你可跟實(shí)際需要增加或者刪除就可以了。
script部分
<script> export default{ data(){ return{ //form提交表單 form:{ coverImage:"" }, rules:{},//表單校驗(yàn)規(guī)則 imageMaxCount: 10,//最多上傳多少?gòu)? imageList: [],//上傳完成后的圖片列表 imageUploadText: "",//上傳組件的文字 hiddImageUpload: false,//是否隱藏上傳組件 imageIndex: 0,//圖片索引 imageUploadUrl: this.$settings.uploadUrl,//上傳圖片的API地址 errorType: ['border-bottom', 'toast'],//出差提示,參考uView的form組件 } }, onReady() { this.$refs.uForm.setRules(this.rules); }, onLoad(){ this.initUploadText(); }, methods(){ initUploadText(){ this.imageUploadText = this.imageMaxCount - this.imageList.length + "/" + this.imageMaxCount; this.hiddImageUpload = (this.imageMaxCount - this.imageList.length) == 0 ? true : false; }, deleteItem(index) { this.imageList.splice(index, 1); this.$refs.imageUpload.remove(index); this.initUploadText() }, uploadError() { this.$u.toast('上傳失??!'); }, imageUploadSuccess(data, index, lists, name) { let that = this; if (data.status == 200) { let itemData = data.data; itemData.url = itemData.url; itemData.index = index; that.imageList.push(itemData); that.initUploadText(); } else { that.$u.toast('上傳失敗!'); } }, setDefault(index) { let that = this; that.imageList = that.imageList.map(function(item, _index, arr) { if (index == _index) { item.checked = true; that.form.coverImage = item.url; } else { item.checked = false; } return item; }); }, } } </script>
data部分已經(jīng)有了注釋了,不做特別說(shuō)明。
上傳組件定義了ref="imageUpload"
,可以通過(guò)ref手動(dòng)操作圖片的upload(手動(dòng)上傳圖片)
、clear(清空內(nèi)部文件列表)
、reUpload(重新上傳)
、remove(index):刪除某張圖片,index為imageList的索引
。這個(gè)看實(shí)際需要,自己實(shí)現(xiàn)一下就可以了。
onReady
的this.$refs.uForm.setRules(this.rules);
主要功能是設(shè)置表單驗(yàn)證,根據(jù)實(shí)際需要自行決定,非必須的哦!
initUploadText
:方法是設(shè)置上傳的文字,也就是那個(gè)15/15。deleteItem
:方法是刪除圖片列表中的某張圖片。這里就用到了ref="imageUpload"
的手動(dòng)方法this.$refs.imageUpload.remove(index);
。uploadError
:上傳圖片出錯(cuò)的提示。imageUploadSuccess
:圖片上傳成功要做的一些事情。setDefault
:設(shè)置封面圖。
樣式
<style> .container{padding:0 30rpx} .font-size-16{font-size:32rpx;} .text-9B9B9B{color:#9B9B9B} .margin-top-10{margin-top:2orpx;} .padding-vertical-15{padding:30rpx 0;} .pre-box {display: flex;align-items: center;justify-content: flex-start;flex-wrap: wrap;} .pre-item {width: 160rpx;height: 160rpx;overflow: hidden;position: relative;margin-right: 10rpx;margin-bottom: 20rpx;} .pre-item-image {width: 100%;height: 160rpx;} .u-delete-icon {position: absolute;top: 0rpx;right: 0rpx;z-index: 10;background-color: #fa3534;border-radius: 100rpx;width: 44rpx;height: 44rpx;display: flex;align-items: center;justify-content: center;} .slot-btn {width: 160rpx;height: 160rpx;display: flex;justify-content: center;align-items: center;background: rgb(244, 245, 246);border-radius: 10rpx;flex-direction: column;} .slot-btn__hover {background-color: rgb(235, 236, 238);} </style>
總結(jié)
到此這篇關(guān)于利用uni-app和uView實(shí)現(xiàn)多圖上傳功能的文章就介紹到這了,更多相關(guān)uni-app和uView多圖上傳功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實(shí)現(xiàn)網(wǎng)頁(yè)上隨滾動(dòng)條滾動(dòng)的層效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁(yè)上隨滾動(dòng)條滾動(dòng)的層效果代碼,涉及JavaScript頁(yè)面元素屬性的獲取、運(yùn)算及設(shè)置等操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11Firefox下設(shè)為主頁(yè)的JavaScript代碼
在IE下,我們可以輕松使用以下代碼來(lái)實(shí)現(xiàn)設(shè)置主頁(yè) 但在firefox我們需要做的更多2008-09-098個(gè)開(kāi)發(fā)者必須知道的JavaScript深層概念(推薦)
JavaScript有一個(gè)名為“調(diào)用堆棧”(Call Stack)的簡(jiǎn)單列表,它逐一管理任務(wù)(堆棧算法),但是當(dāng)異步任務(wù)被傳遞時(shí),JavaScript會(huì)把它彈出到web API,瀏覽器就會(huì)處理它,這篇文章主要介紹了8個(gè)開(kāi)發(fā)者必須知道的JavaScript深層概念,需要的朋友可以參考下2022-10-10動(dòng)態(tài)創(chuàng)建按鈕的JavaScript代碼
本文給大家分享一段JS實(shí)例代碼介紹動(dòng)態(tài)創(chuàng)建按鈕的方法,需要的朋友參考下本文2016-01-01原生JS實(shí)現(xiàn)隨機(jī)點(diǎn)名項(xiàng)目的實(shí)例代碼
這篇文章主要介紹了原生JS實(shí)現(xiàn)隨機(jī)點(diǎn)名項(xiàng)目的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2019-04-04JS實(shí)現(xiàn)點(diǎn)擊按鈕獲取頁(yè)面高度的方法
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊按鈕獲取頁(yè)面高度的方法,涉及JavaScript針對(duì)頁(yè)面元素高度的各種常見(jiàn)運(yùn)算,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11使用uniapp打包微信小程序時(shí)主包和vendor.js過(guò)大解決(uniCloud的插件分包)
每個(gè)使用分包小程序必定含有一個(gè)主包,所謂的主包,即放置默認(rèn)啟動(dòng)頁(yè)面/TabBar頁(yè)面,以及一些所有分包都需用到公共資源/JS 腳本,下面這篇文章主要給大家介紹了關(guān)于使用uniapp打包微信小程序時(shí)主包和vendor.js過(guò)大解決的相關(guān)資料,,需要的朋友可以參考下2023-02-02