uniapp多图上传、一次性上传多张图片

哈喽大家好，今后只分享思维方法，一来让大家思考，二来提升我自己的逻辑思维。为了共同学习进步，

用 uni-file-picker 组件， 文件选择上传

<view class="image-box">
			<uni-file-picker 
				title="最多选择9张图片"
				fileMediatype="image" 
				file-extname="jpg,png"
				mode="grid" 
				:auto-upload="true"
				@select="select" 
				@success="success" 
				@fail="fail" 
			/>
			
		</view>

js方法，选中文件图片，返回路径数组，然后遍历上传到服务器

			// 获取上传状态
			select(e){
				uni.showToast({
					title: '稍等',
					icon: 'none'
				});
				let tempFilePaths = e.tempFilePaths;
				for (var i = 0; i < tempFilePaths.length; i++) {
					this.uploadFile(tempFilePaths[i])
				}
			},

js方法  this.uploadFile

uploadFile(tempFilePaths) {
    			let token = uni.getStorageSync('token');
				// 图片上传
				uni.uploadFile({
					url: 'https://xxx.com/api/v1/worker/updateFile',
					filePath: tempFilePaths,
					name: 'file',
					method: 'POST',
					header: {
						authorization: 'Bearer ' + token
					},
					success: (uploadFileRes) => {
						// 提取图片url
						const res = JSON.parse(uploadFileRes.data);
						if (res.code == 200) {
							this.form.picture.push(res.data); // 上传成功返回的业务数据
							uni.showToast({
								title: '上传成功',
								icon: 'none'
							})
						}
					}
				});
			},

总结：

1.选择文件图片，

2.获取到文件路径。

3.遍历一个个执行上传