[移动开发]微信小程序使用Promise多图片表单上传

这篇文章主要是本人在微信小程序使用多文件上传时。无法做到先上传图片后，返回图片路径，后图片路径与表单数据一起提交的问题。所以使用了同步请求。

前端代码在下方。

注：本篇文章也与linui关联。

issue:function(res){
    //前两步内容为linui的获取图片路径。(数组)
    const toast = this.selectComponent('#img'); 
    var img = toast.linGetValue();
    //声明一个this方便在方法内使用
    var _this = this
    //使用Promise先进行文件上传。
    new Promise(function(resolve,reject){
    //定义一个空的字符串和一个整形
    var urlImg=''
    var len = 0
    //循环处理获取到的图片路径
    img.forEach(function(v){
      //因为又在一个函数内，所以需要重新定义一个this
      var __this = _this
      //文件上传，请求后台接口
      wx.uploadFile({
      url:"http://www.week.com/index.php/admin/User/getImage",
      filePath:v,
      name:'file',
      success:function(res){
        //给整形+1(判断图片是否循环添加结束)
        len+=1
        修改data的值
        __this.setData({
          urlImg:__this.data.urlImg + res.data +','
        })
        //判断图片是否全部添加完成
        if(len==img.length){
        //添加完成后执行下一步,并把this传过去
          resolve(__this)
        }
      }
    })
 })
    //在上一步执行完成后执行
}).then(function(_this){
        //接值this
        //发送ajax请求
      wx.request({
      url: 'http://www.week.com/index.php/admin/Card/addCard',
      data:{
        //获取表单中的值
        title:res.detail.value.title,
        desct:res.detail.value.desct,
        img:_this.data.urlImg
      }
    ,success:function(res){
      console.log(res)
        }
    })
 })
}

前端代码如下:

注：本代码有LinUi请自行加入

<view>
  <form bindsubmit="issue">
    <view style="border-bottom: 1rpx solid #000000;">
      <input placeholder="好的标题能吸引更多的驴友" name='title'></input>
    </view>
    <view style="border-bottom: 1rpx solid #000000;">
      <textarea name="" id="" cols="30" rows="10" name='desct' placeholder="请输入文字"></textarea>
    </view>
    <view>
      图片上传
      <l-image-picker count="9" size-type="compressed" id="img" bind:linremove="removeImg" />
    </view>
    <button form-type="submit"> 发布</button>
  </form>
</view>