微信小程序实现选择图片九宫格带预览


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代码

  1. const AV = require('../../../utils/av-weapp.js')var that;
  2. Page({ data: { images: [], uploadedImages: [], imageWidth: getApp().screenWidth / 4 - 10
  3. }, onLoad: function (options) {
  4. that = this; var objectId = options.objectId; console.log(objectId);
  5. }, chooseImage: function () { // 选择图片
  6. wx.chooseImage({ sizeType: ['compressed'],
  7. sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  8. success: function (res) { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  9. var tempFilePaths = res.tempFilePaths; console.log(tempFilePaths);
  10. that.setData({ images: that.data.images.concat(tempFilePaths)
  11. });
  12. }
  13. })
  14. }, previewImage: function () { // 预览图集
  15. wx.previewImage({ urls: that.data.images
  16. });
  17. }, submit: function () { // 提交图片,事先遍历图集数组
  18. that.data.images.forEach(function (tempFilePath) { new AV.File('file-name', { blob: { uri: tempFilePath,
  19. },
  20. }).save().then( // file => console.log(file.url())
  21. function(file) { // 先读取
  22. var uploadedImages = that.data.uploadedImages;
  23. uploadedImages.push(file.url()); // 再写入
  24. that.setData({ uploadedImages: uploadedImages
  25. }); console.log(uploadedImages);
  26. }
  27. ).catch(console.error);
  28. });
  29. wx.showToast({ title: '评价成功', success: function () {
  30. wx.navigateBack();
  31. }
  32. });
  33. }, delete: function (e) { var index = e.currentTarget.dataset.index; var images = that.data.images;
  34. images.splice(index, 1);
  35. that.setData({ images: images
  36. });
  37. }
  38. })

wxml代码

  1. class="gallery">
  2. class="item" wx:for="{{images}}" wx:key="">

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

本文作者2017-5-27 14:20
admin
粉丝0 阅读21 回复0
上一篇:
微信小程序之文件类API发布时间:2017-05-27
下一篇:
Laravel5微信小程序登录获取用户信息扩展发布时间:2017-05-27

精彩阅读

排行榜

小程序互动交流社区
181-2013-0473
周一至周五 9:00-18:00
意见反馈:79354359@qq.com

扫一扫联系我们