找回密码
 立即注册

QQ登录

只需一步,快速开始

[Demo源码] 微信小程序之上传图片和图片预览实例,附工程源码

[复制链接]
查看: 1095|回复: 150
最佳答案
0 

1

主题

4

帖子

59

积分

新人求带

积分
59
 楼主| 发表于 2018-4-9 14:32:05 | 显示全部楼层 |阅读模式
本帖最后由 我的个神啊 于 2018-4-9 14:33 编辑

这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步。

先看下效果图
162a47c2e3000857.gif

只写了一下效果样式的话希望大家不要太在意,下面马路杀手要开车了。

1.wxml排版和布局

这个排版非常简单就是一个按钮button加个图片image标签而已,这个相信有点基础的人都能理解,直接放代码:
  1. <view class="container">
  2.   <view class="userinfo">
  3.     <button bindtap="upload"> 上传图片 </button>
  4.   </view>
  5.   <block wx:for="{{tempFilePaths}}" wx:key="{{index}}">
  6.     <image src="{{item }}" bindtap="listenerButtonPreviewImage" data-index="{{index}}" style="width: 100%;"/>
  7.   </block>
  8. </view>
复制代码

2.重要的js

首先定义一个点击按钮上传图片的一个事件,这里会用到微信图片API中的wx.chooseImage

这个API会有6个参数分别是:
09143614.png

好了该介绍的都介绍了,下面来看下代码:
  1. upload: function () {
  2.     let that = this;
  3.     wx.chooseImage({
  4.       count: 9, // 默认9
  5.       sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  6.       sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  7.       success: res => {
  8.         wx.showToast({
  9.           title: '正在上传...',
  10.           icon: 'loading',
  11.           mask: true,
  12.           duration: 1000
  13.         })  
  14.         // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  15.         let tempFilePaths = res.tempFilePaths;
  16.         that.setData({
  17.           tempFilePaths: tempFilePaths
  18.         })
  19.   
  20.       }
  21.     })
  22.   },
复制代码

不要觉得这样就万事大吉了,现在仅仅是在前端显示,你还要上传到服务器,上传的话就会用到另一个API了wx.uploadFile

这个API会有8个参数
143628.png

下面来看下代码是什么样的:
  1. upload: function () {
  2.     let that = this;
  3.     wx.chooseImage({
  4.       count: 9, // 默认9
  5.       sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  6.       sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  7.       success: res => {
  8.         wx.showToast({
  9.           title: '正在上传...',
  10.           icon: 'loading',
  11.           mask: true,
  12.           duration: 1000
  13.         })  
  14.         // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  15.         let tempFilePaths = res.tempFilePaths;

  16.         that.setData({
  17.           tempFilePaths: tempFilePaths
  18.         })
  19.         /**
  20.          * 上传完成后把文件上传到服务器
  21.          */
  22.         var count = 0;
  23.         for (var i = 0, h = tempFilePaths.length; i < h; i++) {
  24.           //上传文件
  25.         /*  wx.uploadFile({
  26.             url: HOST + '地址路径',
  27.             filePath: tempFilePaths[i],
  28.             name: 'uploadfile_ant',
  29.             header: {
  30.               "Content-Type": "multipart/form-data"
  31.             },
  32.             success: function (res) {
  33.               count++;
  34.               //如果是最后一张,则隐藏等待中  
  35.               if (count == tempFilePaths.length) {
  36.                 wx.hideToast();
  37.               }
  38.             },
  39.             fail: function (res) {
  40.               wx.hideToast();
  41.               wx.showModal({
  42.                 title: '错误提示',
  43.                 content: '上传图片失败',
  44.                 showCancel: false,
  45.                 success: function (res) { }
  46.               })
  47.             }
  48.           });*/
  49.         }  
  50.         
  51.       }
  52.     })
  53.   },
复制代码

有的人会有疑问为什么会定义一个count为0呢,就是因为需要判断是不是最后一张图片如果是就不需要显示加载中了。

好了,上传图片基本上说完了接着看预览图片,预览图片的话也要用到一个微信的API是wx.previewImage

这个API有五个参数
43925.png

定义预览图片方法,点击图片的时候执行:
  1. listenerButtonPreviewImage: function (e) {
  2.     let index = e.target.dataset.index;//预览图片的编号
  3.     let that = this;
  4.     wx.previewImage({
  5.       current: that.data.tempFilePaths[index],//预览图片链接
  6.       urls: that.data.tempFilePaths,//图片预览list列表
  7.       success: function (res) {
  8.         //console.log(res);
  9.       },
  10.       fail: function () {
  11.         //console.log('fail')
  12.       }
  13.     })
  14.   },
复制代码

这个时候才算是大工告成,如果想看完整代码可以去我github上去看https://github.com/Mr-MengBo/upload-pic

大家有问题的话可以提出来,我们一起解决,一起进步,希望本文章对大家有帮助,谢谢
upload-pic-master.zip (6.27 KB, 下载次数: 17)
回复

使用道具 举报

最佳答案
0 

0

主题

13

帖子

198

积分

新人求带

积分
198
发表于 2018-4-9 16:27:07 | 显示全部楼层
bjkfsdhjkfhbsdjkhfsdjfksdhkfsd
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

412

帖子

1388

积分

专家路上

积分
1388
发表于 2018-4-9 20:48:23 | 显示全部楼层
你有梦想吗?加油
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

33

帖子

132

积分

新人求带

积分
132
发表于 2018-4-9 22:19:57 | 显示全部楼层
666666666666666
回复 支持 反对

使用道具 举报

最佳答案
0 

1

主题

411

帖子

6781

积分

S1

积分
6781
发表于 2018-4-9 23:57:45 | 显示全部楼层
回复

使用道具 举报

最佳答案
0 

0

主题

3

帖子

49

积分

新人求带

积分
49
发表于 2018-4-10 09:12:55 | 显示全部楼层
微信小白来围观,66666
回复 支持 反对

使用道具 举报

最佳答案
0 

9

主题

389

帖子

3528

积分

专家路上

积分
3528
发表于 2018-4-10 11:41:04 | 显示全部楼层
66666666666666666
回复 支持 反对

使用道具 举报

最佳答案
0 

9

主题

389

帖子

3528

积分

专家路上

积分
3528
发表于 2018-4-10 11:41:09 | 显示全部楼层
666666666666666666666666666666
回复 支持 反对

使用道具 举报

最佳答案
0 

9

主题

389

帖子

3528

积分

专家路上

积分
3528
发表于 2018-4-10 11:45:26 | 显示全部楼层
66666666666666
回复 支持 反对

使用道具 举报

最佳答案
0 

7

主题

719

帖子

3841

积分

专家路上

积分
3841
发表于 2018-4-10 13:20:11 | 显示全部楼层
定义预览图片方法,点击图片的时候执行
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com