uniapp 上传多张图片
上传图片时要设置"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],'
·
上传图片时要设置"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)
}
更多推荐
已为社区贡献15条内容
所有评论(0)