（干货）微信小程序之上传图片和图片预览

这几天一直负责作微信小程序这一块，也能够说是边作边学习吧，把本身作的微信小程序的一些功能分享出来，与你们探讨一下，相互学习相互进步。

先看下效果图

只写了一下效果样式的话但愿你们不要太在乎，下面马路杀手要开车了。

1.wxml排版和布局

  这个排版很是简单就是一个按钮button加个图片image标签而已，这个相信有点基础的人都能理解，直接放代码：

<view class="container">
  <view class="userinfo">
    <button bindtap="upload"> 上传图片 </button>
  </view>
  <block wx:for="{{tempFilePaths}}" wx:key="{{index}}">
    <image src="{{item }}" bindtap="listenerButtonPreviewImage" data-index="{{index}}" style="width: 100%;"/>
  </block>
</view>

2.重要的js

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

  这个API会有6个参数分别是：

 

参数	类型	必填	说明
count	Number	否	最多能够选择的图片张数，默认9
sizeType	StringArray	否	original 原图，compressed 压缩图，默认两者都有
sourceType	StringArray	否	album 从相册选图，camera 使用相机，默认两者都有
success	Function	是	成功则返回图片的本地文件路径列表 tempFilePaths
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

 

好了该介绍的都介绍了，下面来看下代码：

upload: function () {
    let that = this;
    wx.chooseImage({
      count: 9, // 默认9
      sizeType: ['original', 'compressed'], // 能够指定是原图仍是压缩图，默认两者都有
      sourceType: ['album', 'camera'], // 能够指定来源是相册仍是相机，默认两者都有
      success: res => {
        wx.showToast({
          title: '正在上传...',
          icon: 'loading',
          mask: true,
          duration: 1000
        })  
        // 返回选定照片的本地文件路径列表，tempFilePath能够做为img标签的src属性显示图片
        let tempFilePaths = res.tempFilePaths;
        that.setData({
          tempFilePaths: tempFilePaths
        })
  
      }
    })
  },

不要以为这样就万事大吉了，如今仅仅是在前端显示，你还要上传到服务器，上传的话就会用到另外一个API了wx.uploadFile

这个API会有8个参数

参数	类型	必填	说明
url	String	是	开发者服务器 url
filePath	String	是	要上传文件资源的路径
name	String	是	文件对应的 key , 开发者在服务器端经过这个 key 能够获取到文件二进制内容
header	Object	否	HTTP 请求 Header, header 中不能设置 Referer
formData	Object	否	HTTP 请求中其余额外的 form data
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

下面来看下代码是什么样的：

upload: function () {
    let that = this;
    wx.chooseImage({
      count: 9, // 默认9
      sizeType: ['original', 'compressed'], // 能够指定是原图仍是压缩图，默认两者都有
      sourceType: ['album', 'camera'], // 能够指定来源是相册仍是相机，默认两者都有
      success: res => {
        wx.showToast({
          title: '正在上传...',
          icon: 'loading',
          mask: true,
          duration: 1000
        })  
        // 返回选定照片的本地文件路径列表，tempFilePath能够做为img标签的src属性显示图片
        let tempFilePaths = res.tempFilePaths;

        that.setData({
          tempFilePaths: tempFilePaths
        })
        /**
         * 上传完成后把文件上传到服务器
         */
        var count = 0;
        for (var i = 0, h = tempFilePaths.length; i < h; i++) {
          //上传文件
        /*  wx.uploadFile({
            url: HOST + '地址路径',
            filePath: tempFilePaths[i],
            name: 'uploadfile_ant',
            header: {
              "Content-Type": "multipart/form-data"
            },
            success: function (res) {
              count++;
              //若是是最后一张,则隐藏等待中  
              if (count == tempFilePaths.length) {
                wx.hideToast();
              }
            },
            fail: function (res) {
              wx.hideToast();
              wx.showModal({
                title: '错误提示',
                content: '上传图片失败',
                showCancel: false,
                success: function (res) { }
              })
            }
          });*/
        }  
        
      }
    })
  },

有的人会有疑问为何会定义一个count为0呢，就是由于须要判断是否是最后一张图片若是是就不须要显示加载中了。

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

这个API有五个参数

current	String	否	当前显示图片的连接，不填则默认为 urls 的第一张
urls	StringArray	是	须要预览的图片连接列表
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

定义预览图片方法，点击图片的时候执行：

listenerButtonPreviewImage: function (e) {
    let index = e.target.dataset.index;//预览图片的编号
    let that = this;
    wx.previewImage({
      current: that.data.tempFilePaths[index],//预览图片连接
      urls: that.data.tempFilePaths,//图片预览list列表
      success: function (res) {
        //console.log(res);
      },
      fail: function () {
        //console.log('fail')
      }
    })
  },

这个时候才算是大工告成，若是想看完整代码能够去我github上去看https://github.com/Mr-MengBo/upload-pic

你们有问题的话能够提出来，咱们一块儿解决，一块儿进步，但愿本文章对你们有帮助，谢谢