Rumah > hujung hadapan web > tutorial js > 微信小程序多图片上传的实现实例代码

微信小程序多图片上传的实现实例代码

零下一度
Lepaskan: 2018-05-17 15:31:41
asal
3214 orang telah melayarinya

这篇文章主要为大家详细介绍了微信小程序实现多张图片上传功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办?

首先,我们来看一看wx.chooseImage(object)和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
   }
  })
 }
})
Salin selepas log masuk

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

现在开始写多张图片上传的例子

首先,我们还是要选择图片

wx.chooseImage({
 success: function(res) {
  var tempFilePaths = res.tempFilePaths;//这里是选好的图片的地址,是一个数组
  
 }
})
Salin selepas log masuk

然后在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);
      }
        
      }
    });
  }
Salin selepas log masuk

多张图片上传的方法写好了,下面就是引用

var app=getApp();
Page({
  data:{
   pics:[]
  },
  choose:function(){//这里是选取图片的方法
   var that=this;
   wx.chooseImage({
      count: 9-pic.length, // 最多可以选择的图片张数,默认9
      sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
      sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
      success: function(res){
      var imgsrc=res.tempFilePaths;  
      that.setData({
        pics:imgsrc
      });
   },
   fail: function() {
    // fail
   },
   complete: function() {
    // complete
   }
  })

  },
  uploadimg:function(){//这里触发图片上传的方法
    var pics=this.data.pics;
    app.uploadimg({
      url:'https://........',//这里是你图片上传的接口
      path:pics//这里是选取的图片的地址数组
    });
 },
  onLoad:function(options){

 }

})
Salin selepas log masuk

Atas ialah kandungan terperinci 微信小程序多图片上传的实现实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan