微信小程序如何一次性上传多个本地相片?
今天给大家普及一下微信小程序如何一次性上传多个本地相片?下面就一起去看一看,了解了解,相信可以帮助到大家的。

问题描述
最近做项目的时候要实现一个上传相片的功能,用了微信提供的api之后发觉很容易就做出来了,在pc端调试也没有弊端,但是等到我用真机调试的时候就发现出问题了,问题就是在真机调试的时候无法一次性上传多张图片。
老规矩,以源码为导向
photos.js
//部分参数我就不抽出了,关键是看实现机制
var app = getApp();
var baseUrl = app.baseUrl;
//上传图片的路径
var uploadUrl = baseUrl+\'pictureController/insertPic\';
var array = [];
var owerId = \'33aef7e0ac1b11e6af9f142d27fd7e9e\';
var albumId;
var pageSize = 9;
var currentPage = 1;
var cryUrl = app.cryUrl;
Page({
data: {
hasMore:false,
cryUrl:cryUrl,
clientHeight:0,
// 图片布局列表(二维数组,由`albumList`计算而得)
layoutList: [],
// 布局列数
layoutColumnSize: 3,
// 是否显示loading
showLoading: false,
// loading提示语
loadingMessage: \'\',
// 是否显示toast
showToast: false,
// 提示消息
toastMessage: \'\',
// 是否显示动作命令
showActionsSheet: false,
// 当前操作的图片
imageInAction: \'\',
// 图片预览模式
previewMode: false,
// 当前预览索引
previewIndex: 0,
images_upload: \'../resources/images/camera.png\',
imageBaseUrl : baseUrl+"pictures/"
},
/* 函数描述:作为上传文件时递归上传的函数体体;
* 参数描述:
* filePaths是文件路径数组
* successUp是成功上传的个数
* failUp是上传失败的个数
* i是文件路径数组的指标
* length是文件路径数组的长度
*/
uploadDIY(filePaths,successUp,failUp,i,length){
wx.uploadFile({
url: uploadUrl,
filePath: filePaths[i],
name: \'fileData\',
formData:{
\'pictureUid\': owerId,
\'pictureAid\': albumId
},
success: (resp) => {
successUp++;
},
fail: (res) => {
failUp ++;
},
complete: () => {
i ++;
if(i == length)
{
this.showToast(\'总共\'+successUp+\'张上传成功,\'+failUp+\'张上传失败!\');
}
else
{ //递归调用uploadDIY函数
this.uploadDIY(filePaths,successUp,failUp,i,length);
}
},
});
},
uploadImage:function(e){
wx.chooseImage({
count: 9,
sizeType: [\'original\', \'compressed\'],
sourceType: [\'album\', \'camera\'],
success: (res) => {
var successUp = 0; //成功个数
var failUp = 0; //失败个数
var length = res.tempFilePaths.length; //总共个数
var i = 0; //第几个
this.uploadDIY(res.tempFilePaths,successUp,failUp,i,length);
},
});
}
})
那么如何使用呢?
修改了uploadUrl之后,直接调用 uploadImage 函数即可。
以上就是微信小程序如何一次性上传多个本地相片的全部内容了,大家都学会了吗?

- 怎么在AutoCAD中查看全部的内容?
- 别弃我2026-08-03 00:31:12

- 如何在AutoCAD中选框选图形?在AutoCAD中选框选图形的方法
- 栗子2026-08-03 00:31:10

- 如何在AutoCAD中画箭头符号?
- 对味2026-08-03 00:30:52

- 怎么在AutoCAD中绘制三维立体室内图?
- 别认怂2026-08-03 00:30:48

- 怎么给AutoCAD中的3d图形填充颜色?
- 花心症2026-08-03 00:30:42

- 如何解决AutoCAD启动很慢的问题?
- 凉人心2026-08-03 00:30:38

- QQMac版如何修改备注?QQMac版修改备注的方法
- 留井2026-08-03 00:30:35

- QQ手机版怎么取消个性签名与空间同步?
- 何必等2026-08-03 00:30:31

- 如何在AutoCAD中设置底图?AutoCAD设置底图的方法
- 阑珊2026-08-03 00:30:31

- QQ手机版如何设置井柏然字体?设置井柏然字体的方法
- 棼谷2026-08-03 00:30:28

























