<view class="weui-cell">
<view class="weui-cell__bd">
<view class="weui-uploader">
<view class="weui-uploader__hd">
<view class="weui-uploader__title">上传图片</view>
</view>
<view class="weui-uploader__bd">
<view class="weui-uploader__files">
<block wx:for="{{photos}}" wx:for-item="image">
<view class="weui-uploader__file">
<image class="weui-uploader__img" src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image>
</view>
</block>
</view>
<view class="weui-uploader__input-box">
<view class="weui-uploader__input" bindtap="bindChooiceProduct"></view>
</view>
</view>
</view>
</view>
</view>
//上传图片
bindChooiceProduct: function () {
var that = this;
wx.chooseImage({
count: 3, //最多可以选择的图片总数
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
//上传等待中...
wx.showToast({
title: '正在上传...',
icon: 'loading',
mask: true,
duration: 10000
})
console.log(res)
var uploadImgCount = 0;
for (var i = 0, h = tempFilePaths.length; i < h; i++) {
console.log(tempFilePaths[i])
wx.uploadFile({
url: 'http://192.168.3.232:9980/card-api/teacher' + '/homework/image/upload',
filePath: tempFilePaths[i],
name: 'image',//和后台约定的名字 KEY
header: {
"Content-Type": "multipart/form-data"
},
success: function (res) {
uploadImgCount++;
var data = JSON.parse(res.data)
var photos = that.data.photos;
photos.push(data.data.url + data.data.image );
that.setData({
photos: photos
});
console.log(data)
//如果是最后一张,则隐藏等待中
if (uploadImgCount == tempFilePaths.length) {
wx.hideToast();
}
},
fail: function (res) {
wx.hideToast();
wx.showModal({
title: '错误提示',
content: '上传图片失败',
showCancel: false,
success: function (res) { }
})
}
});
}
}
});
} ,
previewImage(e){
var src = e.currentTarget.dataset.src; //获取data-src
//图片预览
wx.previewImage({
current: src, // 当前显示图片的http链接
urls: this.data.photos // 需要预览的图片http链接列表
})
},
css用的是 weui
