• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序 多图上传解决方案

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

为了使代码体积小  我这里将多图上传 封装到单独的一个js 页面的js调用他

我们看firhealth.js文件内容

// pages/home/home.js
 var upload = require(\'../../style/upload.js\');
Page({
  /**
   * 页面的初始数据
   */
  //跳转页面
  btn:function(e){
    wx.navigateTo({
      url: \'/pages/sechealth/sechealth\',
    })
  },
  tijian:function(e){
    var that=this;
    upload.Much("https://wx.caoman.net/WXdiagnos/MuchUpload",function(res){
      
      var obj=JSON.parse(res.data);
      console.log(obj);
      var url="https://wx.caoman.net"+obj.url;
      that.setData({
        tijianPic: that.data.tijianPic.concat(url),
        imglist:1
      });
      console.log(that.data.tijianPic);
    })
  },
  data: {
    //面部图片路径
    facePic:[],
    //体检图片路径
    tijianPic:[],
    imglist:0,///控制体检报告是否显示

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

代码 tianjia  函数  为点击时触发的函数调用了 upload.js里边的函数  下面我们看 upload.js 代码

//上传一张图片
var upload=({
Single:function(Funurl,fn){
  wx.chooseImage({
    count:1, ///最多可以选择一张图片
    sizeType:[\'original\',\'compressed\'],//原图或压缩图
    sourceType:[\'album\',\'camera\'],//图片来源
    success: function(res) {
      const tempFilePaths=res.tempFilePaths;//相当于src路径
      //console.log(tempFilePaths);
      wx.uploadFile({
        header:{
          "Content-Type":"multipart/form-data"
        },
        name:\'file\',
        url:Funurl,
        filePath: tempFilePaths[0],
        success(res){
          fn(res);
        }
      })
    },
  })
},
//上传多张图片
Much:function(Funurl,fn){
  var list=new Array();
 wx.chooseImage({
   count:9,//最多可以选择9张图
   sizeType: [\'original\',\'compressed\'],
   sourceType:[\'album\',\'camera\'],
   success: function(res) {
     const tempFilePaths=res.tempFilePaths;
     for (var i = 0; i < tempFilePaths.length;i++){
       wx.uploadFile({
         url: Funurl,
         name: \'file\',
         filePath: tempFilePaths[i],//第几张图片
         header: {
           "Content-Type": "multipart/form-data"
         },
         success(res) {
          fn(res);
         },
         fail(res) {
           console.log(res.data);
         }
       })
     }
   },
 })
}
})
module.exports=upload;

在upload.js中  我们看到页面调用upload.js的函数了,我们会发现  该函数使用的是 for 将文件循环的上传了,,我在测试时发现 上传文件是异步执行的  这是 在循环完 在调用回调函数,发现回调函数的值是空的,为什么呢,

因为js的异步执行不会阻塞当前线程 当for循环执行完了  第一个上传文件还没有执行完,当函数回调成功后,里边的上传文件异步才依次执行完毕,  我们知道  数组是可以追加的      这时可以让函数回调多次   依次 给

tijianPic 变量追加数组值    当执行完后  我们在console.log() 发现  上传文件了三次  在回调后的代码块里输出 也是三次 那么三次 我们不停的在数组上追加 即上传了多个文件  返回的每个路径我们都存到变量


如果代码还解决不了 请仔细阅读 和测试 上部分代码为 实践项目中部分代码

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序实现上传多张本地图片到服务器和图片预览发布时间:2022-07-18
下一篇:
微信小程序图片上传和预览发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap