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

时间：2024-01-23 09:45:58

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

先看下效果图

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

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

大家有问题的话可以提出来，我们一起解决，一起进步，希望本文章对大家有帮助，谢谢

相关文章