258资源分享网

说在前面

最近由于项目需要所以学了下小程序，也做了一些东西，随后便有了以下的一些总结了，现在说说如何使用小程序一次性上传多个本地相片。

问题描述

最近做项目的时候要实现一个上传相片的功能，用了微信提供的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 函数即可。

我使用用递归的方式来多次上传选中的图片的原因？

小程序的官方文档有提到， wx.uploadFile一次只能上传一张图片，而我用了for循环多次上传的在pc端调试可以上传多张成功，但是在真机调试的时候却还是只能上传一张，于是我便投机在上传成功之后再次调取wx.uploadFile进行上传，结果成功了，为了代码整洁我便用了递归的方式进行调用。

Note:发布的这些文章全都是自己边学边总结的，难免有纰漏，如果发现有不足的地方，希望可以指出来，一起学习咯，么么哒。