Javascript

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

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);
      }
    })


  },

})
多图上传.png
上一篇 下一篇

猜你喜欢

热点阅读