小程序的多图上传我之前的文章写过。
原理是直接用 wx.chooseImage 1.选择图片,2.微信把图片变成本地图,3.你拿这个本地路径给接口,接口给你张网络图路径。
最近遇见一个需求是为了省服务器空间和带宽,需要把本地图转成base64再传给接口(下图是接口文档)。网上找了很多多图转base64,都是废话。所以自己写一个。老规矩,拿来可以直接用。
效果图:
代码:
<view class="weui-cell">
<view class="weui-cell__bd">
<view class="weui-uploader">
<view class="weui-uploader__hd">
<view class="weui-uploader__title">上传图片:<text>(最多上传3张)</text></view>
</view>
<view class="weui-uploader__bd">
<view class="weui-uploader__files">
<block wx:for="{{pics}}" wx:key="pics" wx:for-item="image">
<view class="weui-uploader__file">
<image class="weui-uploader__img" src="{{image}}" src="{{image}}" bindtap="previewImage"></image>
<view class='closex' bindtap='deleteImg' data-index='{{index}}'>X</view>
</view>
</block>
<!-- 加号 -->
<view class="weui-uploader__input-box {{isShow?'true':'hideTrue'}}">
<view class="weui-uploader__input" bindtap="chooseImage"></view>
</view>
<!-- 加号 -->
</view>
<view class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></view>
<!-- isShow 这个是判断是否进行触发点隐藏操作 -->
</view>
</view>
</view>
</view>
/* add img */
icon {
vertical-align: middle;
}
.weui-cell {
padding: 10px 15px;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: flex;
align-items: center;
}
.weui-cell_input {
padding-top: 0;
padding-bottom: 0;
}
.weui-uploader__hd {
display: -webkit-box;
display: -webkit-flex;
display: flex;
padding-bottom: 10px;
align-items: center;
}
.weui-uploader__title {
flex: 1;
}
.weui-uploader__title text {
color: #b2b2b2;
}
.weui-uploader__bd {
margin-bottom: -4px;
margin-right: -9px;
overflow: hidden;
}
.weui-uploader__file {
float: left;
margin-right: 9rpx;
margin-bottom: 9rpx;
position: relative;
}
.weui-uploader__img {
display: block;
width: 120rpx;
height: 120rpx;
}
.weui-uploader__input-box {
float: left;
position: relative;
margin-right: 10rpx;
width: 120rpx;
height: 120rpx;
box-sizing: border-box;
border: 1rpx solid #d9d9d9;
}
.weui-uploader__input-box:before, .weui-uploader__input-box:after {
content: " ";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #d9d9d9;
}
.weui-uploader__input-box:before {
width: 2px;
height: 39.5px;
}
.weui-uploader__input-box:after {
width: 39.5px;
height: 2px;
}
.weui-uploader__input {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.hideTrue {
display: none;
}
.closex {
width: 40rpx;
height: 40rpx;
text-align: center;
line-height: 40rpx;
position: absolute;
right: 0;
top: 0;
background: rgba(0, 0, 0, 0.5);
color: #fff;
}
js:DATA里需要写这4个参数,我就不给大家贴了。直接从点击上传开始写了就。我的需求是最多传3张,有6张,9张需求的,自己改。第10行,接着写4,5,6 就行。最终的 pics 就是base64数组。 大家可以conlse.log()打印一下、
// 图片上传
chooseImage: function () {
var _this = this,
pics = this.data.pics;
wx.chooseImage({
count: 3 - pics.length, // 最多可以选择的图片张数,默认9
sizeType: ['compressed'], // original 原图,compressed 压缩图,默认二者都有
sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
success: res => {
for (var p = 0; p < res.tempFilePaths.length; p++) {
wx.getFileSystemManager().readFile({
filePath: res.tempFilePaths[p], //选择图片返回的相对路径
encoding: 'base64', //编码格式
success: res => { //成功的回调
var imgSrc = 'data:image/png;base64,' + res.data;
pics = pics.concat(imgSrc);
console.log('th++',pics)
// // 控制触发添加图片的最多时隐藏
if (pics.length >= 3) {
_this.setData({
isShow: (!_this.data.isShow)
})
} else {
_this.setData({
isShow: (_this.data.isShow)
})
}
_this.setData({
pics: pics,
})
}
})
}
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},
// 图片预览
previewImage: function (e) {
var current = e.target.dataset.src
wx.previewImage({
current: current,
urls: this.data.pics
})
},
// 删除图片
deleteImg: function (e) {
var _this = this;
// var imgs = this.data.imgs;
var pics = this.data.pics;
var index = e.currentTarget.dataset.index;
pics.splice(index, 1);
this.setData({
pics: pics,
});
if (pics.length >= 3) {
_this.setData({
isShow:false
})
} else {
_this.setData({
isShow: true
})
}
},
有什么不会的可以直接呼我。。。有啥可以为大家解答。