微信上传多图并且异步upload到服务器。网上搜到的一个只有上传功能，没有修改上传的功能。如果上传错了就没办法了。为了解决这个上传的问题，编写了下面这个代码，微信最多上传9张图片。上传之后图片上面有一个删除按钮，点击删除即可删除当前的图片然后重新再上传。这段代码有一个不完美的地方就是每次上传的图片都在最后面，不能调整顺序。

js里面存一个 pics的数组变量 这个数组最大长度是9 用来存储上传的图片的路径。上传成功一张图片就push一个路径进来。删除一张图片就在这个数组删除那个路径。

index.js

Page({
  data: {
    pics: [],
  },
  choosImg: function() {
    var that = this;
    var pics = that.data.pics;
    wx.chooseImage({
      count: 9 - pics.length,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        var imgs = res.tempFilePaths;
        for (var i = 0; i < imgs.length; i++) {
          wx.uploadFile({
            url: "这里你的接收图片的url地址",
            filePath: imgs[i],
            name: "file",
            formData: {
              filetype: "image",
              app: "supervise"
            },
            success: function(result) {
              var resultData = JSON.parse(result.data);
              pics.push(resultData.preview_url);
              that.setData({
                pics: pics,
              })
            }
          })
        }
      }
    })
  },
  removeImg :function(e){
    console.log(e)
    var that = this;
    var pics = that.data.pics;
    var index = e.currentTarget.dataset.index;
    pics.splice(index,1);
    that.setData({
      pics : pics
    })

  }
})

前端的 index.wxml代码很简单；通过判断pics的长度来显示是否有上传按钮；

<view style="margin:10rpx;">选择图片</view>
<block>
<view class="imageBox" wx:for="{{pics}}">
  <image class="choosimg" src="http://v2.jianlianmeng.loc:808{{item}}"></image>
  <image class="removeimg" src="/images/droupimg.png" bindtap="removeImg" data-index="{{index}}"></image>
</view>
<view class="imageBox" hidden="{{pics.length >= 9 }}">
  <image class="choosimg" src="/images/cam.jpg" bindtap="choosImg"></image>
</view>
</block>

一个简单的样式文件 index.wxss

.imageBox{position:relative;width:120rpx;height:120rpx; float:left; margin:10rpx 0 0 10rpx;}
.choosimg{width:120rpx;height:120rpx}
.removeimg{position: absolute;right:0;top:0; width:40rpx;height:40rpx;}

打包代码：xcx_uploadimages.rar