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

小程序开发

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

电子邮箱:

公司地址:

厦门市思明区莲花南路6号北方大厦601单元

公司地址