金狮贵宾会

登录
免费开通

小程序开发之变相实现多图片上传新手教程

小程序开发之变相实现多图片上传新手教程。。。。 。。?⒅凶芑嵝枰募上传的功效(好比图片上传),,,,,微信提供了wx.uploadFile(OBJECT)要领,,,,,用来将文件上传至服务器。。。。 。。

上传图片之前自然需要选择图片,,,,,小程序API -- wx.chooseImage(OBJECT)。。。。 。。就是从外地相册选择图片或者使用相机照相。。。。 。。

小程序开发之变相实现多图片上传新手教程

OBJECT参数说明如下:

wx.chooseImage({
  count: 9, //最多可以选择的图片数,,,,,默以为9
  sizeType: ['orignal','compressed'], //original 原图,,,,,compressed 压缩图,,,,,默认二者都有
  sourceType: ['album', 'camera'], //album 从相册选图,,,,,camera 使用相机,,,,,默认二者都有
  success: function(){}, //乐成则返回图片的外地文件路径列表 tempFilePaths
  fail: function(){}, //接口挪用失败的回调函数
  complete: function(){} //接口挪用竣事的回调函数(挪用乐成、失败都会执行)
})

success返回参数: tempFilePaths: 图片的外地文件路径列表

wx.uploadFile(OBJECT)

wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', //开发者服务器 url
      filePath: tempFilePaths[0],//要上传文件资源的路径
      name: 'file', //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
      formData:{ //HTTP 请求中其他特另外 form data
        'user': 'test'
      },
      success: function(res){
        var data = res.data
        //do something
      }
    })

在chooseImage回调函数里挪用上传要领!

 

前久,,,,,做了一个如上图的图片上传功效!直接上代码吧:

/* 函数形貌:作为上传文件时递归上传的函数体体;;
   * 参数形貌: 
   * filePaths是文件路径数组
   * successUp是乐成上传的个数
   * failUp是上传失败的个数
   * i是文件路径数组的指标
   * length是文件路径数组的长度
   */      
    uploadDIY(filePaths,successUp,failUp,i,length){
      var that = this;
      app.toastShow(0,"图片上传中...",20000000,1);
      wx.uploadFile({
          url: '/uploadurl/', 
          filePath: filePaths[i],
          name: 'file',
          formData:{
            'user': 'test'
          },
          success: (res) => {
              successUp++;
              var srcArr = that.data.src;
              srcArr.push(filePaths[i]),
              that.setData({
                src : srcArr
              });
              var data = JSON.parse(res.data);
              var newpicKeys = that.data.picKeys;
              newpicKeys.push(data.data['pic_key']);
              that.setData({
                picKeys: newpicKeys
              });
          },
          fail: (res) => {
              that.setData({
                isuploaderror: 1
              });
              failUp ++;
          },
          complete: () => {
              i ++;                        
              if(i == length){
                wx.hideToast();
                var txt = '总共'+successUp+'张上传乐成,'+failUp+'张上传失败!';
                app.toastShow(0,txt,2000,1);
              }else{  //递归挪用uploadDIY函数
                  if(that.data.isuploaderror){
                      app.toastShow(0,'图片上传失败,,,,,请重新选择上传',2000,1);
                  }else{
                      this.uploadDIY(filePaths,successUp,failUp,i,length);
                  }
              }
          }
      });
  },
  uploadImage:function(e){
    var that = this;
    that.setData({
      isuploaderror: 0
    });
    var nowLen = that.data.src.length;
    var remain = 9 - nowLen;
    wx.chooseImage({
        count: remain,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
            var successUp = 0; //乐成个数
            var failUp = 0; //失败个数
            var length = res.tempFilePaths.length; //总共个数
            var i = 0; //第几个
            this.uploadDIY(res.tempFilePaths,successUp,failUp,i,length);
        },        
    });
  }

由于wx.uploadFile只能单个文件上传,,,,,以是需要变相的实现多文件上传,,,,,即,,,,,complete回调里挪用uploadDIY挪用函数自己~ 直到i==length!

小程序开发之变相实现多图片上传新手教程


【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿,,,,,由于未联系到知识产权人或未发明有关知识产权的挂号,,,,,若有知识产权人并不肯意我们使用,,,,,若是有侵权请连忙联系。。。。 。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真,,,,,仅系客观性形貌,,,,,如您需要相识该类商品/服务详细的资讯,,,,,请您直接与该类商品/服务的提供者联系。。。。 。。


KESION 金狮贵宾会软件

KESION 金狮贵宾会软件是海内领先的在线教育软件及私域社交电商软件服务提供商,,,,,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。。 。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。。 。。

KESION 一直通过手艺立异,,,,,提供产品和服务,,,,,助力企业向数字化转型,,,,,通过科技驱动商业刷新,,,,,让商业变得更智慧!



▼点击进入金狮贵宾会官网相识更多



热门标签
SaaS
上/下篇
  • 微信小程序wifi一键连的简朴要领,,,,,还可以坐公交当门卡

  • 沃尔玛扫码购怎么用,沃尔玛扫码购使用流程

换一换相关推荐
精选内容
热门精选
金狮贵宾会·宾至如归-尊贵显赫 金狮贵宾会·宾至如归-尊贵显赫 金狮贵宾会·宾至如归-尊贵显赫
【网站地图】
小程序开发之变相实现多图片上传新手教程 - KESION 金