利用uni-app和uView實(shí)現(xiàn)多圖上傳功能全過(guò)程

更新時(shí)間：2023年03月29日 10:46:25 作者：傾斜的水瓶座

最近在使用uniapp開(kāi)發(fā)的微信小程序中使用了圖片上傳功能,下面這篇文章主要給大家介紹了關(guān)于利用uni-app和uView實(shí)現(xiàn)多圖上傳功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

最近使用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部分

不多廢話(huà)，來(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>