利用uni-app和uView实现多图上传功能全过程

更新时间：2023年03月29日 10:46:25 作者：倾斜的水瓶座

最近在使用uniapp开发的微信小程序中使用了图片上传功能,下面这篇文章主要给大家介绍了关于利用uni-app和uView实现多图上传功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言

最近使用uni-app开发一个多平台的小项目，项目需要多图上传，uni-app前端UI框架使用了uView UI。结合uView的Upload组件，实现了多图上传功能，多图上传可以限制上传的个数，以及选择设为封面功能。

效果图

上传初始状态：

上传图片：

uView Upload组件

先来认识一下uView的Upload组件。Upload组件用于图片上传场景。Upload组件支持如下平台

APP
H5
各家小程序

Upload组件支持手动上传与自动上传，可以限制图片大小以及图片数量。可以配置上传前的钩子与删除文件前的钩子，灵活性还是比较大的。有兴趣的可以去看下相关的组件文档，这里就不多做介绍了。

view部分

不多废话，来到正文：

图片上传一般可以单独使用，也可以跟其他form组件放在一起，示例中其他组件的使用不在本篇内容范畴内，所以一行代码用以表示。只展示主要代码。

<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)">设为封面</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>

这段代码中，定义了上传成功后的图片预览、以及上传组件的展示。图片列表里，还有设为封面的功能。

完整代码：

<template>
    <view>
        <u-form :model="form" ref="uForm" :rules="rules" :error-type="errorType">
            <u-form-item label="表单项" 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)">设为封面</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="表单项" label-width="160rpx" :border-bottom="true">
                        //...	
            </u-form-item>
        </u-form>
    </view>
</template>

上传代码片段前后都定义了一个form-item组件，你可跟实际需要增加或者删除就可以了。

script部分

<script>
export default{
    data(){
        return{
            //form提交表单
            form:{
                coverImage:""
            },
            rules:{},//表单校验规则
            imageMaxCount: 10,//最多上传多少张
			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部分已经有了注释了，不做特别说明。

上传组件定义了ref="imageUpload",可以通过ref手动操作图片的upload（手动上传图片）、clear(清空内部文件列表)、reUpload（重新上传）、remove(index)：删除某张图片，index为imageList的索引。这个看实际需要，自己实现一下就可以了。

onReady的this.$refs.uForm.setRules(this.rules); 主要功能是设置表单验证，根据实际需要自行决定，非必须的哦！

initUploadText：方法是设置上传的文字，也就是那个15/15。
deleteItem：方法是删除图片列表中的某张图片。这里就用到了ref="imageUpload"的手动方法this.$refs.imageUpload.remove(index);。
uploadError：上传图片出错的提示。
imageUploadSuccess：图片上传成功要做的一些事情。
setDefault：设置封面图。

样式

<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>

总结

到此这篇关于利用uni-app和uView实现多图上传功能的文章就介绍到这了,更多相关uni-app和uView多图上传功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js中获取时间new Date()的全面介绍
下面小编就为大家带来一篇js中获取时间new Date()的全面介绍。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
JS实现网页上随滚动条滚动的层效果代码
这篇文章主要介绍了JS实现网页上随滚动条滚动的层效果代码,涉及JavaScript页面元素属性的获取、运算及设置等操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-11-11
浅谈JavaScript中的属性:如何遍历属性
下面小编就为大家带来一篇浅谈JavaScript中的属性:如何遍历属性。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
Firefox下设为主页的JavaScript代码
在IE下，我们可以轻松使用以下代码来实现设置主页但在firefox我们需要做的更多
2008-09-09
8个开发者必须知道的JavaScript深层概念(推荐)
JavaScript有一个名为“调用堆栈”（Call Stack）的简单列表，它逐一管理任务（堆栈算法），但是当异步任务被传递时，JavaScript会把它弹出到web API，浏览器就会处理它，这篇文章主要介绍了8个开发者必须知道的JavaScript深层概念，需要的朋友可以参考下
2022-10-10
动态创建按钮的JavaScript代码
本文给大家分享一段JS实例代码介绍动态创建按钮的方法，需要的朋友参考下本文
2016-01-01
原生JS实现随机点名项目的实例代码
这篇文章主要介绍了原生JS实现随机点名项目的实例代码，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2019-04-04
Javascript 作用域使用说明
在传统的面向对象程序设计中，主要关注于公用和私有作用域。公用作用域中的对象属性可以从对象外部访问，即开发者创建对象的实例后，就可使用它的公用属性。
2009-08-08
JS实现点击按钮获取页面高度的方法
这篇文章主要介绍了JS实现点击按钮获取页面高度的方法,涉及JavaScript针对页面元素高度的各种常见运算,具有一定参考借鉴价值,需要的朋友可以参考下
2015-11-11
使用uniapp打包微信小程序时主包和vendor.js过大解决(uniCloud的插件分包)
每个使用分包小程序必定含有一个主包,所谓的主包,即放置默认启动页面/TabBar页面,以及一些所有分包都需用到公共资源/JS 脚本,下面这篇文章主要给大家介绍了关于使用uniapp打包微信小程序时主包和vendor.js过大解决的相关资料,,需要的朋友可以参考下
2023-02-02