gallery.gif数据:依赖接口wx.upload、chooseImage与preview数据请求通过LeanCloud完成图片选择:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html#wxchooseimageobject前端处理:1.保存images数 ...
gallery.gif
数据:
依赖接口wx.upload、chooseImage与preview
数据请求通过LeanCloud完成
图片选择:
https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html#wxchooseimageobject
前端处理:
1.保存images数组为已选择图片
2.选择了更多图片后concat数组
3.预览图集
4.leancloud上传多图,目测顺序一致
js代码
-
const AV = require('../../../utils/av-weapp.js')var that;
-
Page({ data: { images: [], uploadedImages: [], imageWidth: getApp().screenWidth / 4 - 10
-
}, onLoad: function (options) {
-
that = this; var objectId = options.objectId; console.log(objectId);
-
}, chooseImage: function () { // 选择图片
-
wx.chooseImage({ sizeType: ['compressed'],
-
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
-
success: function (res) { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
-
var tempFilePaths = res.tempFilePaths; console.log(tempFilePaths);
-
that.setData({ images: that.data.images.concat(tempFilePaths)
-
});
-
}
-
})
-
}, previewImage: function () { // 预览图集
-
wx.previewImage({ urls: that.data.images
-
});
-
}, submit: function () { // 提交图片,事先遍历图集数组
-
that.data.images.forEach(function (tempFilePath) { new AV.File('file-name', { blob: { uri: tempFilePath,
-
},
-
}).save().then( // file => console.log(file.url())
-
function(file) { // 先读取
-
var uploadedImages = that.data.uploadedImages;
-
uploadedImages.push(file.url()); // 再写入
-
that.setData({ uploadedImages: uploadedImages
-
}); console.log(uploadedImages);
-
}
-
).catch(console.error);
-
});
-
wx.showToast({ title: '评价成功', success: function () {
-
wx.navigateBack();
-
}
-
});
-
}, delete: function (e) { var index = e.currentTarget.dataset.index; var images = that.data.images;
-
images.splice(index, 1);
-
that.setData({ images: images
-
});
-
}
-
})
wxml代码
-
<view class="gallery">
-
<view class="item" wx:for="{{images}}" wx:key="">
-
<image style="width: {{imageWidth}}px; height: {{imageWidth}}px" src=" {{item}}" bindtap="previewImage" mode="aspectFill" />
-
<!-- 删除按钮 -->
-
<view class="delete" bindtap="delete" data-index="{{index}}"><image style="left: {{imageWidth / 2 - 10}}px;" src="/images/icon_delete.png" /></view>
-
</view>
-
<view class="item">
-
<image style="width: {{imageWidth}}px; height: {{imageWidth}}px" src="/images/icon_add.png" class="button-upload" bindtap="chooseImage" />
-
</view></view><button type="primary" bindtap="submit">提交</button>
wxss代码
-
/*画廊*/.gallery { /*margin-bottom: 100rpx;*/
-
display: flex; justify-content: flex-start; flex-wrap: wrap;
-
}/*每张图片所占容器*/.item { position: relative; margin: 5px;
-
}/*删除按钮*/.delete { position: absolute; height: 20px; bottom: 0; width: 100%; background: #ccc; opacity: .8;
-
}.delete image { position: absolute; width: 20px; height: 20px;
-
}
源码下载:https://git.oschina.net/dotton/lendoo-wx,本文涉及代码存于/pages/member/evalute文件夹中。