uniapp+springBoot多图片上传

后端接口

@PostMapping("/imageUpload")
    public ResponseWrapper<Object> uploadFiles(@RequestParam("file") MultipartFile file, @RequestParam("token") String token, @RequestParam("sid") String sid)

前端

说是多图片上传,实际上是上传了多次,uniapp不能通过formdata一次性上传多个图片

绑定select和delete事件,在里面维护filePaths变量

<uni-file-picker
								size="5"
								limit="9"
								file-extname="png,jpg"
								title="最多选择9张图片"
								v-model="imageValue"
								:auto-upload="false"
								@select="select"
								@delete="deleteImg"
							></uni-file-picker>

并且创建一个数组filePaths用于存储临时文件路径

return {
			imageValue: [],
			filePaths: [],
			sid:0,
}

select事件

select(e) {
			for (let i = 0; i < e.tempFilePaths.length; i++) {
				this.filePaths.push(e.tempFilePaths[i]);
			}
			
		},

delect事件

deleteImg(e) {
			for (let i = 0; i < this.filePaths.length; i++) {
				if (this.filePaths[i] == e.tempFilePath) {
					this.filePaths.splice(i, 1);
				}
			}	
		},

上传方法upload

upload() {
			
			for (let i = 0; i < this.filePaths.length; i++) {
				
				
				uni.uploadFile({
					url: 'http://xxx/xxx/imageUpload',
					filePath: this.filePaths[i],
					name: 'file',//这个参数对应后端的file参数
					formData: {
                        //这里填写携带的其他参数与后端对应
						token: uni.getStorageSync('token'),
						sid: this.sid
					},

					success(res) {
						console.log(res.data);
					}
				});
			}
		},