小程序上传多张图片 微信小程序批量上传图片-手机电子游戏网址

小程序开发

2021-04-29

  在实际开发中,很多时候都需要要上传图片,而正常需要上传一张完成之后,才能继续上传,这样就显得非常麻烦,同时给用户的体验很不好,那么对于微信小程序,怎么上传多张图片呢,今天厦门在乎科技为大家带来微信小程序批量上传图片功能,一起来了解一下吧。

小程序上传多张图片 微信小程序批量上传图片


  微信小程序批量上传图片:

  1.首先,我们来看一看 wx.chooseimage(object) 和 wx.uploadfile(object) 这两个 api

  wx.chooseimage(object) api 组件

小程序上传多张图片 微信小程序批量上传图片


  wx.uploadfile(object) api 组件

小程序上传多张图片 微信小程序批量上传图片


  示例代码:

  wx.chooseimage({

  success: function(res) {

  var tempfilepaths = res.tempfilepaths

  wx.uploadfile({

  url: 'http://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址

  filepath: tempfilepaths[0],

  name: 'file',

  formdata:{

  'user': 'test'

  },

  success: function(res){

  var data = res.data

  //do something

  }

  })

  }

  })

  这里的示例代码,是选择图片,然后上传选中的图片中的第一个图片

小程序上传多张图片 微信小程序批量上传图片


  2.现在开始写多张图片上传的例子,首先,我们还是要选择图片

  wx.chooseimage({

  success: function(res) {

  var tempfilepaths = res.tempfilepaths;//这里是选好的图片的地址,是一个数组

  }

  })

  3.然后在app.js中写一个多张图片上传的方法,后面引入,你也可以写在一个js文件中,后面引入:

  //多张图片上传

  function uploadimg(data){

  var that=this,

  i=data.i?data.i:0,

  success=data.success?data.success:0,

  fail=data.fail?data.fail:0;

  wx.uploadfile({

  url: data.url,

  filepath: data.path[i],

  name: 'filedata',

  formdata:null,

  success: (resp) => {

  success ;

  console.log(resp)

  console.log(i);

  //这里可能有bug,失败也会执行这里

  },

  fail: (res) => {

  fail ;

  console.log('fail:' i "fail:" fail);

  },

  complete: () => {

  console.log(i);

  i ;

  if(i==data.path.length){ //当图片传完时,停止调用

  console.log('执行完毕');

  console.log('成功:' success " 失败:" fail);

  }else{//若图片还没有传完,则继续调用函数

  console.log(i);

  data.i=i;

  data.success=success;

  data.fail=fail;

  that.uploadimg(data);

  }

  }

  });

  }

小程序上传多张图片 微信小程序批量上传图片


  以上就是今天为大家带来的关于“小程序上传多张图片 微信小程序批量上传图片”全部内容,通过对上传图片的api进行进一步的处理,同时为了方便以后使用,可以封装成一个特定的组件分享出来,想要了解更多关于小程序开发内容,欢迎关注厦门在乎科技-专注小程序、app、网站开发

即刻联系「在乎科技」专业项目经理为您提供产品咨询和项目报价!

contact us

联系手机电子游戏网址

联系电话:

131-6399-9993

电子邮箱:

公司地址:

厦门市思明区湖滨南路388号国贸大厦34d单元

公司地址