近期微信小程序开发总结（4）：上传文件wx.uploadfile(一个文案下同时上传多个文件）

在微信开发过程中遇到过一个问题，就是比如我们要做信息反馈的时候，一个文案可能需要配置多张图片一起发送，但是我们微信自带的wx.uploadfile只能一次上传一张，之前在网上查过一些资料，说可以用递归，但是可能有些小伙伴跟我一样，一开始的时候没能领悟到精髓，采用递归之后就是同一个文案搭配要上传的每一张图片单独成了一个反馈信息，这显然不是我们想要的。不过我最后还是用递归实现了.主要原理就是先用wx.uploadfile把要上传的文件全部先上传到服务器，然后服务器在返回拼接好的地址，再同文案一起用接口上传就好了，下面是详细步骤：
1、首先写好页面布局，有“发布信息”按钮，“选择图片”按钮，还要有展示所选图片的地方，下面是我的wxml里面的代码：

<!-- 点击此处能将图片同文案等信息一起发布 -->
<view bindtap="sendFile">
  发布信息
</view>

<!-- 点击此处从本地选取多张图片出来 -->
<view>
  <image src="/images/add.png" bindtap="chooseImage" style="width:200rpx;height:200rpx;"></image>
</view>

<!-- 这里用于展示已经选好的图片 -->
<view wx:for="{{imgUrl}}" wx:key="index">
  <image src="{{item}}" style="width:200rpx;height:200rpx;"></image>
</view>

2、点击添加的图标去选择本地图片：
js代码片段如下：

    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success (res) {
        // tempFilePath可以作为img标签的src属性显示图片
        console.log(res);
        that.setData({
          imgUrl:res.tempFilePaths
        });
        console.log(that.data.imgUrl);
      }
    })
  },

选图片的样例：


3、选好本地图片后我们可以点击发布信息，此处没有做文案编辑，文案直接写在代码里面。其中js的代码片段如下：
点击“发布信息”执行sendFile方法,然后sendFile中执行upLoadPhoto方法：

  sendFile(){
    var that=this;
    let i=0;
    let length=this.data.imgUrl.length;
    that.upLoadPhoto(i,length);
  },

 upLoadPhoto(i, length) 
  {    
    wx.uploadFile({    
        //后端提供的，单指上传图片到服务器的接口地址
      url: 'https://www.jswzl.xyz/comment/uploadFile',      
      filePath: this.data.imgUrl[i],      
      name: 'file',
      // 图片上传成功后服务器返回图片地址，我们前端接收并拼接
      success: (res) => {
        console.log('上传图片成功：', JSON.parse(res.data));        
        var data = JSON.parse(res.data);     
        // 把获取到的路径存入imagesurl字符串中         
        this.setData({          
          imagesurl: this.data.imagesurl.concat(data.data+',')        
        })        
        console.log(this.data.imagesurl)      
      },      
      fail: (res) => {

      },      
      complete: () => {        
        i++;    
            //判断选择的本地图片是否已经全部上传到服务器，如果i==length则表示已完成 
        if (i == length) { 
          console.log("上传成功");
          // 图片全部上传好就用后端给的发布信息的接口地址去发布请求，同前面那个接口地址不同，前面那个是专门用于上传图片的，这个是用于发布信息的
          wx.request({
            url: 'https://www.jswzl.xyz/Trends/add',
            method:'POST',
            data:{
              content:"阳阳帅",//文案内容
              profess:'true',
              uid:71,
              pictrue:this.data.imagesurl,//要上传的多张图片
            },
            header: {
              'content-type': 'application/x-www-form-urlencoded'
             },
          })
        }
        // 所选的本地图片还没有全部上传成功
        else { 
          //递归调用upLoadPhoto函数   
          console.log("上传第"+i-1+"张");       
          this.upLoadPhoto( i, length);        
        }      
      },    
    });  
  },

4、在upLoadPhoto方法中是先调用后端的专门上传图片的接口地址，把所选图片都上传完成之后再调用发布信息的接口，把已经上传好的图片同文案内容等信息一起发布即可，所以在这里后端是做了两个接口去实现。

以上便是一个文案配备多个图片的一次性发布的一个方法，如果有不对的地方或者有需要改正的地方希望各位能批评指正，同时对这里面说的有不懂的也可以私信我哦！