上传图片时要设置"Content-Type": "multipart/form-data",

批量上传图片的接口,向参数files中传入多张图片,方法如下:

1。使用for循环,一次上传多张图片,

async imgUpload(imgs) {
				for(let i=0;i<imgs.length;i++) {
					let res = await ApiService.imgUpload(imgs[i],'files',null);
					console.log('imgUpload:',res);
					if(res.success) {
						if(res.data.code == 200) {
							this.imgList = this.imgList.concat(res.data.urlList);
							console.log('imgUpload:imgList=',this.imgList);
							this.itemData['picture'] = this.imgList.join(',');
							console.log('imgUpload:itemData=',this.itemData);
						}
					}
				}
				
			},

ApiService中的方法:使用uni.uploadFiles方法,传入filePath和fileKey,可实现单张图片上传。

imgUpload: (path,key,data) => Request.upload({
		name: '文件批量上传',
		baseUrl: Api.RootUrl,
		url: Api.mulUpload,
		filePath:path,
		fileKey:key,
		data: data
	}),

2。使用uni.uploadFiles方法的files参数实现多张图片上传,但是当imgArr中的name都是files时,服务器端只收到了最后一张图片。当name为其他时,一张图片也接收不到。用这种方法上传多张图片,服务器端也得修改。

imageLoad(paths) {
				let imgArr = paths.map((value, index) => {
					return {
						name: 'files'+(index),
						uri: value,
					};
				});
				uni.uploadFile({
					url: '*************/common/mulUpload', //仅为示例,非真实的接口地址
					files: paths,
					header:{
						"Content-Type": "multipart/form-data",
						"User-Agent": "undefined/1.0.0(Android 10;ANA-AN00;android/1.0.0;)",
						"Accept-Language": "en;q=1",
						"Content-Encoding": "gzip",
						'Authorization':'*****************'},
					success: (uploadFileRes) => {
						console.log('success',JSON.stringify(uploadFileRes)+uploadFileRes.data);
					},
					fail:(e) => {
						console.log('error=',e);
					},
					complete: (msg) => {
						console.log('complete=',JSON.stringify(msg));
					}
				});
			}

3。也可把方法封装在ApiService中:此种方法仅做示例用,如果服务器端还是用files接收图片的话,这种方法一张图也接收不到。把name: 'files'+(index)的'+(index)去掉的话,可以接收一张

imgUpload1: (path,data) => Request.uploadFiles({
		name: '文件批量上传',
		baseUrl: Api.RootUrl,
		url: Api.mulUpload,
		filePath:path,
		data: data
	}),
async imgUpload(imgs) {
				let imgArr = imgs.map((value, index) => {
					return {
						name: 'files'+(index),
						uri: value,
					};
				});
				let res = await ApiService.imgUpload1(imgArr,null);
				// let res = await ApiService.imgUpload(imgs[0],'files',null);
				console.log('imgUpload:',res)
}

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐