效果图
1.wxml
<view class="showImge" data-index='{{pics}}'>
<view class="itemImg" wx:for="{{pics}}" wx:key="index">
<image class="img" src="{{item}}" />
<image class="clear" src="https://pic.repaiapp.com/static/png/20180718/11/1531883626525635149.png" bindtap="delet" data-index="{{index}}"/>
</view>
<view class="subImg" bindtap="uploadImg" wx:if="{{pics.length!=3}}">
<image class="photo" src="https://pic.repaiapp.com/static/png/20180718/11/1531884448749953101.png"/>
<text>上传图片</text>
</view>
</view>
2.js
data:{
pics:[]
},
//本地绝对路径转为相对路径
file(path){
var _this = this;
wx.showLoading({title:'正在上传...'})
wx.uploadFile({
/* upload/file */
url: 'https://dev.xiaodian.in/wowmeow/wxapp_v1/upload/file',
filePath: path,
name: 'uploadFile',
header: {
'content-type': 'multipart/form-data',
"app":'wowmeowwxapp',
"version":'2.0'
}, // 设置请求的 header
formData: {
access_token:wx.getStorageSync("access_token")
},
success: function(res){
console.log(JSON.parse(res.data));
var url=JSON.parse(res.data).data;
app.showToast('上传成功','success')
_this.data.pics.push(url);
_this.setData({
pics:_this.data.pics
})
},
fail: function(res){
console.log(res);
},
})
},
uploadImg(){
var picsLen=this.data.pics.length;
var _this = this;
wx.chooseImage({
count: 3-picsLen, // 最多可以选择的图片张数
sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
success: function(res){
/* https://dev.xiaodian.in/wowmeow/wxapp_v1/upload/push */
console.log(res)
for (var i in res.tempFilePaths) {
_this.file(res.tempFilePaths[i]);
}
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
},