从相册选择图片并显示
打开摄像获取拍照
我是想实现一个类似于QQ空间的发表,可以写文字,然后下面配上图片。然后就简单写了一下,下面是我的具体代码:
.wxml:
<view class="up-cationter">
<textarea class="up-text" />
<view class="upImg">
<button bindtap="chooseButton">选择图片</button>
<image class="madeImg" mode="aspectFit" src="{{tempFilePath}}"></image>
<button bindtap="lookButton">发布</button>
</view>
</view>
.xcss:
.up-cationter{
padding: 40rpx 5rpx;
background-color: whitesmoke;
flex-direction: column;
}
.up-text{
margin: 40rpx auto;
width: 90%;
height: 450rpx;
background-color: #fcfcfc;
border: 1rpx white solid;
}
.upImg{
background-color: whitesmoke;
padding-left: 20rpx;
padding-right: 20rpx;
flex-direction: column;
text-align: center;
margin: 20rpx 10rpx;
}
.madeImg{
width: 50%;
height: 300rpx;
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.js:
chooseWay: function (type) {
var that = this;
wx.chooseImage({
sizeType: ['original', 'compressed'],
sourceType: [type],
success: function (res) {
/*上传多张(遍历数组,一次传一张) */
for (var index in res.tempFilePaths) {
that.uploadImg(res.tempFilePaths[index]);
}
that.setData({
tempFilePath : res.tempFilePaths[index]
})
}
})
},
uploadImg: function (url, filePath) {
var that = this;
wx.uploadFile({
url: url,
filePath: '',
name: 'uploadFile',
header: {
'content-type': 'multipart/form-data'
}, // 设置请求的 header
formData: { 'shopId': wx.getStorageSync('shopId') },
success: function (res) {
wx.showToast({
title: "图片修改成功",
icon: 'success',
duration: 700
})
},
fail: function (res) {
}
})
},
效果如下:
(ps:因为是在电脑上做的测试,所以无法选择“拍照”模式,感兴趣的朋友可以自己尝试)
问题:
奈何发现好像不管选了多少张(最多9张)图片,只会在页面中显示一张,总会覆盖前面的图片。奈何一个小白,也是不知道什么地方的问题。希望有大佬可以帮我指出来,在此谢过