uniapp上传多张图片

<template>
    <view>
  
			<form @submit="onSubmit">
             <view class="kuang">
				 <h2 class="h2">请填写表单</h2>
             	<input class="move1" type="text" value="" name="name" placeholder="请输入获奖名称"/>
             	
             	<input class="move2" type="text" value="" name="score" placeholder="请输入对应分值"/>
             	<view class="text">
             		<text>上传证明材料</text>
             	</view>
             	
				<view class="hang">
				  <view class="images-box">
					<block v-for="(item,index) in imglist" :key="index">
					  <view class="img-box">
						<image class="img" :src="item" mode='aspectFill'></image>
						<view class="img-delete"  @click='imgDelete1' :data-delindex="index">
						<image class="img" src="../../static/close.png"></image>
						</view>
					  </view>
					</block>
					
					<view class="img-box" @click="upload1" v-if="imglist.length<9">
						<image class="img" src="../../static/upload.png" mode=""></image>
					</view>
					</view>
				</view>
				
				
				<button class="btnS" type="default" form-type="submit">提交表单</button>
				<button class="btnS" form-type="reset" @click="reset">重置表单</button>
                 
			
			  </view>
			   
			 </form>
          </view>
		  
		  
      </view>
</template>
 
<script>
    export default {
            data() {
                 return {
					 imglist:[],//选择图片后生成的临时地址数组 /存储选择的本地图片文件路径列表
					 imgurl:[],  //存储服务器返回的文件	
					 name:"",
                     score:"",
                     }
					
                },
				
                methods: {
                        
						//*选择图片*//
						upload1() {
						    const _this = this;
						    uni.chooseImage({
								count: 9, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['album'], //从相册选择
								success: (res) => {
									console.log(res);
									if (_this.imglist.length === 0) {
										_this.imglist = res.tempFilePaths
									} else if (_this.imglist.length < 9) {
										_this.imglist = _this.imglist.concat(res.tempFilePaths); //concat追加到数组
									}	
									
								}
						    })
						},
						
						
						//* 删除已经选择的图片 *//
						imgDelete1(e) {				
							let index = e.currentTarget.dataset.delindex; //获取要删除的图片的下标，否则删除的永远是第一张 ,对应 <view class='img-delect' @click='imgDelete1' :data-delindex="index">
							this.imglist.splice(index, 1);			  	
						},
						
						onSubmit(e){
							var that = this
							console.log('e',e)
							that.bdArr = e.detail.value
							console.log("123",that.bdArr.name)
							console.log("456",that.bdArr.score)
							console.log("456",that.imgurl)
							console.log("456",that.imgurl[0])
							if(that.bdArr.name == ""){
								uni.showToast({
									title:'请输入获奖名称',
									icon:'error',
									duration:1000
								})
								
							} else if(that.bdArr.score == ""){
								uni.showToast({
									title:'请输入对应分数',
									icon:'error',
									duration:1000
								})
							} else if(that.imgurl == ""){
								uni.showToast({
									title:'请上传证明材料',
									icon:'error',
									duration:1000
								})
							}
							else {
								
							
							
							uni.request({
								url:"xxxxx", //接口
								method:'POST',
								header:{
									authentication:getApp().globalData.authentication
								},
								data:{
									sproject:that.bdArr.name,
									svalue:that.bdArr.score,
									stype:1,
									ssupport:that.imgurl
								},
								success(res) {
									console.log("res",res)
									if(res.statusCode=='200'){
										console.log("res",res)
										
										uni.showToast({
											title:'提交成功',
											icon:'sucess',
											duration:1000
										})
										
									}
								}
							})
							}
						},	
                },			
        }
</script>
         
<style scoped lang="scss">
page{
	background-color: #F2F2F2;
	}

.kuang{
	
	border-width:1rpx;
	border-style:solid;
	border-color:rgb(89, 140, 229); 
	line-height:150rpx;
	margin-left:auto;
	margin-right:auto;
	right:0;
	left:0;
 	width:80%;
	/* height: auto; */
 	background-color:rgb(118, 205, 255);
 	margin-top:100rpx;	
	
 
 }


 .h2{
	 flex-direction:column;
	 justify-content:center;
	 text-align: center;
 }

 .border{
 	margin-top:10rpx;
 	border-bottom:2px solid #eee;
	
 }	
 .move1,.move2{
	border-radius:8rpx;
	background-color: #F2F2F2;
 	margin-left:20rpx;
	border-width:3rpx;
	border-style:solid;
	border-color:gray;
	width: 90%;
	height: 60rpx;
	padding-left:20rpx;
 }
 
 .move2{
	 margin-top:15rpx;
 }

 .btnS{
	margin: 26rpx;
	background-color:rgb(89, 140, 229);
	color:white;
 	
 }
 .leftInv{
	position:relative;
 }
 .hang{
	 width: 88%;
	 margin: auto;
	 margin-top:-22rpx;
	 overflow: hidden;
 }
 /* 图片 */
 .images-box{
  width: 98%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  background-color: white;
  margin: 5rpx;
  
 }
 .img-box{ 
  border: 1rpx;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.452);
  width: 200rpx;
  height: 200rpx;
  margin-left: 35rpx;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  position: relative;
 }
 .img{
   width: 100%;
   height:100%;  
 }
 
 /* 删除图片 */
 .img-delete{
  width:50rpx;
  height:50rpx;
  border-radius:50%;
  position:absolute;
  right:-20rpx;
  top:-55rpx;
 }
 
 .xuan{
	 margin-top:-9rpx;
	 background-color: white;
 }
</style>

运行结果：