uniapp选中多张图片或者视频（多图上传）

因为产品需求，市面上找不到和他类似的组件。只能自己写

这个是封装的函数，单图的不知道有没有问题，多图上传没问题，

因为小程序的函数不支持多图上传，只能一张张的调上传接口，所以我用了Promise.all方法来，处理异步里面单独的上传，在所以上传跑完，函数才返回出链接合成的数组

uni.chooseMedia 版本

js方面的代码：

// 多图上传
// type: 1图片和视频，2图片
// count：最大数量
export function headerUploads(type = 1, count = 1) {
	let mediaType = ['image', 'video']
	if (type == 2) {
		mediaType = ['image']
	}
	return new Promise((resolve, reject) => {
		let UploadList = []
		uni.chooseMedia({
			// 最多可以选择的图片总数
			count,
			// 最长视频时间
			maxDuration: 30,
			mediaType,
			success: res => {
				//启动上传等待中...  
				uni.showLoading({
					title: '上传中',
				});
				console.log('上传的是：', res);
				let upRes = res
				var srcObj = {
					type: res.type
				}
				Promise.all(
						upRes.tempFiles.map((item, index) => {
							return new Promise((resolve1, reject1) => {
								if (upRes.tempFiles[index].duration > 31) {
									uni.showToast({
										title: "上传视频不能超过30秒！",
										icon: 'none',
									})
									return
								}
								uni.uploadFile({
									// 上传地址
									url: BASE_URL + '/api/common/upload',
									name: 'file',
									filePath: upRes.tempFiles[index]
										.tempFilePath,
									formData: {
										// 'file': res.tempFilePaths[0]
									},
									header: {
										'content-type': 'application/x-www-form-urlencoded',
										// "token": uni.getStorageSync('token') || ''
									},
									success: (resz) => {
										console.log('后端返回', (JSON.parse(resz
												.data)
											.data));
										uni.hideLoading()
										// 单图
										if (type == 2) {
											resolve(JSON.parse(resz.data)
												.data)
										} else {
											srcObj.src = JSON.parse(resz
													.data)
												.data
											// resolve(srcObj)
											// setTimeout(() => {
											UploadList.push(srcObj)
											srcObj = {
												type: res.type
											}
											// }, 200)
											console.log('循环中', index, upRes
												.tempFiles
												.length);
											resolve1()
										}
									},
									fail: (resz) => {
										console.log('失败返回', resz);
										uni.hideLoading()
										reject1()
									}
								})
							});
						}))
					.then(() => {
						console.log('循环后', UploadList);
						resolve(UploadList)
					})
					.catch((error) => {
						console.log('循环后', UploadList);
						resolve(UploadList)
					})
			},
			complete: compRes => {}
		});
	})
}

html方面当时写的太烂了，就不弄出来了

更新（因为妹妹评论说uni.chooseMedia在app不给用，就做了一个普通的图片上传控制）

uni.chooseImage版本

函数：

// 多图上传
// count：最大数量
export function headerUploads(count = 9) {
	return new Promise((resolve, reject) => {
		let UploadList = []
		uni.chooseImage({
			// 最多可以选择的图片总数
			count,
			success: res => {
				//启动上传等待中...  
				uni.showLoading({
					title: '上传中',
				});
				Promise.all(
						res.tempFiles.map((item, index) => {
							return new Promise((resolve1, reject1) => {
								uni.uploadFile({
									// 上传地址
									url: BASE_URL + '/common/upload',
									name: 'file',
									filePath: res.tempFilePaths[index],
									formData: {
										// 'file': res.tempFilePaths[index]
									},
									// header: {
									// 	'content-type': 'application/x-www-form-urlencoded',
									// "token": uni.getStorageSync('token') || ''
									// },
									success: (resz) => {
										console.log('后端返回', (JSON.parse(resz
												.data)
											.data));
										uni.hideLoading()
										UploadList.push(JSON.parse(resz
												.data)
											.data)
										resolve1()
									},
									fail: (resz) => {
										console.log('失败返回', resz);
										uni.hideLoading()
										reject1()
									}
								})
							});
						}))
					.then(() => {
						console.log('循环后', UploadList);
						resolve(UploadList)
					})
					.catch((error) => {
						console.log('循环后', UploadList);
						resolve(UploadList)
					})
			},
			complete: compRes => {}
		});
	})
}

// 图片上传（单图）
export function headerUpload() {
	return new Promise((resolve, reject) => {
		uni.chooseImage({
			count: 1, //最多可以选择的图片总数  
			sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有  
			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  
			success: (res) => {
				//启动上传等待中...  
				uni.showLoading({
					title: '上传中',
				});
				uni.uploadFile({
					url: BASE_URL + '/common/upload',
					name: 'file',
					filePath: res.tempFilePaths[0],
					formData: {
						// 'file': res.tempFilePaths[0]
					},
					// header: {
					// 	"Content-Type": "multipart/form-data",
					// 'content-type': 'application/x-www-form-urlencoded',
					// "token": uni.getStorageSync('token') || ''
					// },
					success: (res1) => {
						uni.hideLoading()
						resolve(JSON.parse(res1.data).data)
					},
					fail: (res2) => {
						uni.hideLoading()
						resolve(JSON.parse(res2.data).msg)
					}
				})
			},
		});
	})
}

使用：

headerUploads().then(res => {
	console.log(res);
})