小程序多张图片上传

1.图片上传.wxml代码块

<view class='r_picture' bindtap='uploadPic'>

<p class="font_s33 font_c73">上传故障照片</p>

<view wx:for="{{repairPic}}" wx:key="{{item.id}}" class='s_pic'>

<image src='{{item}}'></image>

</view>

<view class='upload'>

<image src="/images/menu/upload.png"></image>

<view class='u_pic'>

<p class="font_s36 font_c75">上传图片</p>

</view>

</view>

</view>

2.上传图片js代码块

data: {

repairPic: []    ------返回的图片路径是一个数组

},

//uploadPic--上传图片的点击事件

uploadPic: function() {

var that = this;

wx.chooseImage({

sizeType: ['original', 'compressed'],

sourceType: ['album', 'camera'],

success(res) {

var tempFilePaths = res.tempFilePaths;

//tempFilePaths返回的是一个数组  

for (var i = 0; i < tempFilePaths.length;i++){

wx.uploadFile({

url: 'http://192.168.1.99:38088/addFile' , // 仅为示例，非真实的接口地址

filePath: tempFilePaths[i],

name: 'repairpic',//默认是file根据实际情况设定

formData: {

},//HTTP 请求中其他额外的 form data

success(res) {

//后台传回的数据格式转为json对象

var data = JSON.parse(res.data).data;

that.setData({

repairPic: that.data.repairPic.concat(data)

})

console.log(that.data.repairPic);

}

})

}

}

})

}