uni-app 多图上传（后端PHP）

uni-app实现多图上传案例

<template>
	<view>
		<view class="top_nav">
			<view class="nav_left">
				<uni-icon type="arrowleft" class="nav_left_icon" size="30"></uni-icon>
			</view>
			<view class="nav_mid">
				<text>图片</text>
			</view>
			<view class="nav_right" @tap="upload()">
				<view class="icon iconfont icon-xiangji"></view>
			</view>
		</view>
		<view class="homework-ctn">
			<uni-grid :column="3" :hor="35" :ver="-45">
				<uni-grid-item marker="badge" v-for="(item,index) in imgList" :key="index" @longpress="extra(index)">
					<image :src="item" mode="" style="width:200rpx;height:200rpx;"></image>
				</uni-grid-item>
			</uni-grid>
		</view>
		<uniPopup ref="popup" type="bottom">
			<view class="pop_ty">设为主图</view>
			<view class="pop_ty">设置图片标签</view>
			<view class="pop_ty" style="color: red;border-bottom: none;" @tap="deleteNow()">删除</view>
		</uniPopup>
		<view class="upload_final" @tap="final_upload()">上传</view>
	</view>
</template>
<script>
	//此处为从uni-ui引入的一些组件
	import {
		uniCard,
		uniIcon,
		uniPagination,
		uniPopup,
		uniGrid,
		uniGridItem
	} from '@dcloudio/uni-ui'

	export default {
		components: {
			uniCard,
			uniPagination,
			uniPopup,
			uniIcon,
			uniGrid,
			uniGridItem
		},
		data() {
			return {
				finalButton: false,
				imgList: [],
				imgIndex:0
			}
		},
		methods: {
			extra(index) {
			//长按某张图片调起底部弹出层。进行操作
				this.$refs.popup.open()
				this.imgIndex = index
			},
			deleteNow(){
				this.imgList.splice(this.imgIndex-1,1);
				this.$refs.popup.close();
			},
			upload: function() {
				let _self = this;
				uni.chooseImage({
					count:9-this.imgList.length,
					sizeType:'compressed', //指定压缩图
					sourceType: ['album', 'camera'], //从相册选择或者拍摄
					success: function(res) {
						// 预览图片
						_self.imgList = _self.imgList.concat(res.tempFilePaths);
						console.log(res.tempFilePaths);
						
					},
					error: function(e) {
						console.log(e);
					}
				});
			},
			final_upload: function() {
				uni.showLoading({
					title: '图片上传中，请稍后',
					mask:true
				});
				let imgs = this.imgList.map((value,index)=>{
					return {	
						name:'images'+index,
						uri:value
					}
				});
				
				let _self = this;
				//将imgList重新映射
					uni.uploadFile({
						url: '后端文件地址',
						files:imgs,
						success: function(res) {
							if(res.statusCode == 200){
								uni.showToast({
										title: '图片上传完成',
										duration: 1500
								});
								_self.imgList = [];
								uni.hideLoading()
							}
						}
					});
			}
		}
	}
</script>

<style scoped>
	.content {
		text-align: center;
		height: 400upx;
		margin-top: 200upx;
	}

	.pop_ty {
		display: flex;
		justify-content: center;
		height: 50px;
		align-items: center;
		padding-top: 15upx;
		font-size: 15px;
		color: #007AFF;
		border-bottom-color: #C0C0C0;
		border-bottom-width: 2upx;
		border-bottom-style: solid;
	}

	.top_nav {
		display: flex;
		flex-direction: row;
		margin-top: 30px;
		justify-content: space-between;
		align-items: center;
		border-bottom-color: #EEEEEE;
		color: #007AFF;
		font-size: 20upx;
		border-bottom-style: solid;
		padding-bottom: 2upx;
		border-bottom-width: 2upx;
		margin-bottom: 5upx;


	}

	.nav_left {
		padding-left: 5upx;
	}


	.nav_mid {
		font-size: 40upx;
		color: #c0c0c0;
	}

	.nav_right {
		padding-right: 20upx;
	}

	.nav_right>.icon-xiangji {
		font-size: 50upx;
		color: #333333;

	}
</style>

效果图：

后端（PHP）

    if(!empty($_FILES)){

        //获取扩展名
       // $exename  = getExeName($_FILES['images1']);
         $file =  json_decode($_FILES);  
       
   
        for ($i=0; $i < count($_FILES) ; $i++) { 
            $fileName[] = 'images'.$i;
        }
        $final = array(); 
        foreach ($fileName as $k => $v) {
            $exename  = $_FILES[$v]['type'];
            if($exename != 'image/png' && $exename != 'image/jpg' && $exename != 'image/gif' && $exename !='image/jpeg') {
                exit('不允许的扩展名');
            }
            //此处地址根据项目而定，唯一注意的就是图片命名，这里难得去获取后缀，随便写了个png
            $imageSavePath =WEB_CORE_LIB.'images'.'/'.uniqid().rand(1,100).'.png';
             
            if(move_uploaded_file($_FILES[$v]['tmp_name'],$imageSavePath)){
                  $final[] = $v;
            }
        }
        echo json_encode($final);
    }else{
        echo 2;
    }

本项目为后端进行图片批量处理，当然也可以在前端循环调用uni.uploadFile。其余待补充