怎么用uni-app和uView实现多图上传功能

本篇内容主要讲解“怎么用uni-app和uView实现多图上传功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用uni-app和uView实现多图上传功能”吧!

效果图

上传初始状态：

上传图片：

uView Upload组件

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

• APP

• H5

• 各家小程序

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

view部分

不多废话，来到正文：

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

<viewclass="container"><viewclass="font-size-16text-9B9B9Bmargin-top-10">上传图片</view><viewclass="text-9B9B9B">图片宽度和高度都不能低于500像素，至少3张，最多15张！</view><u-form-itemlabel=""v-show="false":border-bottom="false"prop="coverImage"><u-inputv-model="form.coverImage":disabled="false"placeholder=""></u-input></u-form-item></view>

这段代码定义了上传图片的提示文字，以及封面图！

<viewclass="containerpadding-vertical-15"><viewclass="pre-box"><blockv-for="(item,index)inimageList":key="index"><viewclass="pre-item"><imageclass="pre-item-image":src="item.url"mode="aspectFill"></image><viewclass="u-delete-icon"@click="deleteItem(index)"><u-iconname="close"size="20"color="#ffffff"></u-icon></view><viewclass="default-image-box"><u-checkboxshape="circle"v-model="item.checked"labelColor="#FFFFFF"active-color="#19be6b"label-size="24":name="index"size="24"@change="setDefault(index)">设为封面</u-checkbox></view><viewclass="default-image-box-mask"></view></view></block><viewclass="pre-item"><u-uploadref="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"><viewslot="addBtn"class="slot-btn"hover-class="slot-btn__hover"hover-stay-time="150"><u-iconname="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-itemlabel="表单项"label-width="160rpx":border-bottom="true">//...</u-form-item><!--图片上传--><viewclass="container"><viewclass="font-size-16text-9B9B9Bmargin-top-10">上传图片</view><viewclass="text-9B9B9B">图片宽度和高度都不能低于500像素，至少3张，最多15张！</view><u-form-itemlabel=""v-show="false":border-bottom="false"prop="coverImage"><u-inputv-model="form.coverImage":disabled="false"placeholder=""></u-input></u-form-item></view><viewclass="containerpadding-vertical-15"><viewclass="pre-box"><blockv-for="(item,index)inimageList":key="index"><viewclass="pre-item"><imageclass="pre-item-image":src="item.url"mode="aspectFill"></image><viewclass="u-delete-icon"@click="deleteItem(index)"><u-iconname="close"size="20"color="#ffffff"></u-icon></view><viewclass="default-image-box"><u-checkboxshape="circle"v-model="item.checked"labelColor="#FFFFFF"active-color="#19be6b"label-size="24":name="index"size="24"@change="setDefault(index)">设为封面</u-checkbox></view><viewclass="default-image-box-mask"></view></view></block><viewclass="pre-item"><u-uploadref="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"><viewslot="addBtn"class="slot-btn"hover-class="slot-btn__hover"hover-stay-time="150"><u-iconname="camera"size="60":color="$u.color['lightColor']"></u-icon><view>{{imageUploadText}}</view></view></u-upload></view></view></view><!--/图片上传--><u-form-itemlabel="表单项"label-width="160rpx":border-bottom="true">//...</u-form-item></u-form></view></template>

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

script部分

<script>exportdefault{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){letthat=this;if(data.status==200){letitemData=data.data;itemData.url=itemData.url;itemData.index=index;that.imageList.push(itemData);that.initUploadText();}else{that.$u.toast('上传失败！');}},setDefault(index){letthat=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;}returnitem;});},}}</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:030rpx}.font-size-16{font-size:32rpx;}.text-9B9B9B{color:#9B9B9B}.margin-top-10{margin-top:2orpx;}.padding-vertical-15{padding:30rpx0;}.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实现多图上传功能”有了更深的了解，不妨来实际操作一番吧！这里是主机评测网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

上一篇：GO语言延迟函数defer怎么使用

下一篇：echarts折线图流动特效怎么实现

---