图片上传是开发中常见需求点，而关于图片上传中的多图批量上传则是单图上传的升级。

多图上传极大程度上方便了用户在多图上传需求时的操作简化，更是网站守住客户的细节点。

本篇文章介绍基于uni-app如何实现图片批量上传方法封装。

一、在utils文件夹中创建utils.js文件

export function uploadImgList(num,callback) {
	let _this = this
	uni.chooseImage({
		count:num,
		sourceType: ['album'],
		success: (chooseImageRes) => {
			const tempFiles = chooseImageRes.tempFilePaths;
			// 定义Promise集合
			const pList = [];
			tempFiles.forEach(function(tempFile) {
				// 多文件上传需要借助Promise.all的执行力，所以利用Promise封装上传功能
				const p = new Promise(function (resolve, reject) {
					uni.uploadFile({
						url: '批量图片上传接口', // 上传的资源url
						filePath: tempFile, // 要上传文件资源的路径（本地路径）
						name: 'file', // 上传的文件名，后台解析文件需要用的参数名
						header:{
							//'shopId': '',
							//'guardName':''
						},
						// 成功后执行resolve，将对应的结果数据传递给外部的then
						success: function (res) {
							const uploadFileRes = JSON.parse(res.data);
							uploadFileRes.data.newImg = true
							resolve(uploadFileRes.data);
						},
						// 失败后执行reject，将error信息传递给外部的catch
						fail: function (err) {
							console.error('上传失败', err);
							reject(err);
						}
					});
				});
				pList.push(p);
			});
			Promise.all(pList).then(function (results) {
				// 所有上传任务执行成功，results中包含了所有上传成功后响应的数据
				console.log('上传结束', results);
				callback(results)
			}).catch(function (err) {
				// 任意上传任务失败，抛出错误，并停止整个上传任务
				console.error('上传失败', err);
				//tips('上传失败')
			});
		}
	});
}

传递参数说明：

    num：多图上传数量

    callback：回调方法

二、main.js中配置全局方法

import * as util from '@/utils/utils.js'
Vue.prototype.$util = util

三、单页面中调用uploadImgList批量上传图片

<template>
	<view @click="uploadList">点击批量上传单图</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		methods:{
			uploadList(){
				this.$util.uploadImgList(9,(res)=>{
					//打印上传结果
					console.log(res)
				})
			}
		}
	}
</script>

其余uni-app类似封装方法，可本站搜索：

    uni-app微信小程序封装方法上传音频文件代码

    uni-app如何实现封装方法上传单张图片完整代码

    uni-app封装方法实现上传微信头像完整代码