微信小程序使用递归实现多图上传功能

最近在做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);
      }
    })


  },

})

多图上传.png

最后编辑于：2019.08.13 20:14:00

微信小程序 使用递归实现多图上传功能

微信小程序使用递归实现多图上传功能