微信小程序 使用递归实现多图上传功能
2019-08-13 本文已影响0人
CoderZb
最近在做app的小程序版本,
我的简历
这个模块涉及到了生活照的多图上传功能,踩过坑之后才发现,微信小程序这块只支持单张上传,不支持多图上传功能。最终不得已 使用递归的方式一张一张的上传图片。递归的具体实现方式如下:
// pages/hire/my_resume/my_resume.js
var common = require("../../../public.js");
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* user/add_life_image
* 上传简历生活照协议
* 参数 resume_id 简历id
* img_id 前端判断 如果没有删除的图片id 传空 多个逗号隔开
* file 上传图片 支持多个
* @return void
*/
saveBtnClick: function() {
wx.showToast({
title: '保存中...',
icon: 'loading',
duration: 2000
})
var that = this;
// 拍照/本地相册拿到的本地图片
var localSelectImgUrl = [
"http://tmp/wx1e4dd12766f1b015.o6zAJs15FvORcBqF5xfEIJgbuAKI.GNFy9h4tS9GO1fba8a14b68450ce630ec788b8759cd5.png",
"http://tmp/wx1e4dd12766f1b015.o6zAJs15FvORcBqF5xfEIJgbuAKI.oTGVgnFyck5I3ac018a03ba0ad5d49d4d251615db0d2.png",
"http://tmp/wx1e4dd12766f1b015.o6zAJs15FvORcBqF5xfEIJgbuAKI.8tTGRXHJQXAPf2dc8918f6a22cbecb7102e0cd2c3f6e.png"
];
// 上传图片
that.uploadImg(localSelectImgUrl);
},
// 上传图片。
uploadImg: function (localSelectImgUrl){
var that = this;
if (localSelectImgUrl.length == 0){// 本次没有要上传的图片了,不再往下执行,直接返回上个界面
setTimeout(function () {
wx.hideLoading()
}, 2000)
wx.navigateBack({});
return;
}
var jsonData = {
resume_id: 9,
img_id: ''
};
// 每次只传1张图片。每次都把数组第0个元素的图片地址作为参数传给后台
common.uploadFile("user/wx_add_life_image", "post", jsonData, localSelectImgUrl[0], function () { }, function (e) {
// 上传成功状态码1。有个坑:返回的是个json字符串,不是json对象,这里必须得转一下json
if(JSON.parse(e).code == 1){
// 删除数组中索引为0的照片,删除1张。
localSelectImgUrl.splice(0, 1);
// 递归,再次上传。将最新的数组作为参数传递给uploadImg方法
return that.uploadImg(localSelectImgUrl);
}
})
},
})
![](https://img.haomeiwen.com/i2364940/14a75547b03d163b.png)