微信小程序上传头像的实例详解

近些年，微信小程序越来越受到开发者和用户的青睐，其中上传头像是开发中经常会遇到的功能之一。本文将详细讲述在微信小程序中如何实现上传头像的功能。

准备工作

在进行上传头像功能前，需要先确保以下几点准备工作：

1. 项目已使用云开发，开通了云存储服务
2. 在云存储中创建了一个文件夹用以存放头像

实现步骤

步骤一：在页面中添加上传按钮

在 WXML 页面中添加一个文件选择器组件，用于选择图片文件：

<view class="container">
  <button class="btn" type="primary" bindtap="chooseImage">上传头像</button>
  <image class="avatar" src="{{avatarUrl}}"></image>
</view>

步骤二：绑定上传事件

当用户选择完头像后，需要进行上传操作。在 JS 文件中，添加上传头像的事件处理函数：

chooseImage: function() {
  var that = this;
  wx.chooseImage({
    count: 1, // 只能上传一张图片
    success: function(res) {
      var filePath = res.tempFilePaths[0];
      that.uploadImage(filePath);
    },
    fail: function(res) {
      wx.showToast({
        title: '上传失败',
        icon: 'none'
      })
    }
  })
},

步骤三：上传函数的实现

在事件处理函数中，调用 wx.chooseImage() 方法选择完头像后，会回调 success 函数，其中 res.tempFilePaths[0] 表示选择的临时文件路径，需要将其上传到云存储中。上传的方法可以用 wx.cloud.uploadFile() 来实现：

uploadImage: function(filePath) {
  var that = this;
  wx.cloud.uploadFile({
    cloudPath: 'avatar.png', // 云存储路径
    filePath: filePath, // 文件临时路径
    success: function(res) {
      that.setData({
        avatarUrl: res.fileID // 设置头像 URL
      })
      wx.showToast({
        title: '上传成功',
        icon: 'success'
      })
    },
    fail: function(res) {
      wx.showToast({
        title: '上传失败',
        icon: 'none'
      })
    }
  })
},

上传成功后，使用 setData() 方法将头像 URL 设置到页面数据中，并显示上传成功的提示。

这样，上传头像的功能就完成了。

示例一：整体代码

完整代码如下：

<view class="container">
  <button class="btn" type="primary" bindtap="chooseImage">上传头像</button>
  <image class="avatar" src="{{avatarUrl}}"></image>
</view>

Page({
  data: {
    avatarUrl: ''
  },
  chooseImage: function() {
    var that = this;
    wx.chooseImage({
      count: 1, // 只能上传一张图片
      success: function(res) {
        var filePath = res.tempFilePaths[0];
        that.uploadImage(filePath);
      },
      fail: function(res) {
        wx.showToast({
          title: '上传失败',
          icon: 'none'
        })
      }
    })
  },
  uploadImage: function(filePath) {
    var that = this;
    wx.cloud.uploadFile({
      cloudPath: 'avatar.png', // 云存储路径
      filePath: filePath, // 文件临时路径
      success: function(res) {
        that.setData({
          avatarUrl: res.fileID // 设置头像 URL
        })
        wx.showToast({
          title: '上传成功',
          icon: 'success'
        })
      },
      fail: function(res) {
        wx.showToast({
          title: '上传失败',
          icon: 'none'
        })
      }
    })
  }
})

示例二：展示上传进度

如果需要在上传头像过程中展示上传进度，可以通过 wx.cloud.uploadFile() 的 onUploadProgressUpdate 参数实现。例如：

uploadImage: function(filePath) {
  wx.showLoading({
    title: '上传中',
  })
  var that = this;
  wx.cloud.uploadFile({
    cloudPath: 'avatar.png', // 云存储路径
    filePath: filePath, // 文件临时路径
    success: function(res) {
      that.setData({
        avatarUrl: res.fileID // 设置头像 URL
      })
      wx.hideLoading();
      wx.showToast({
        title: '上传成功',
        icon: 'success'
      })
    },
    fail: function(res) {
      wx.hideLoading();
      wx.showToast({
        title: '上传失败',
        icon: 'none'
      })
    },
    onUploadProgressUpdate: function(res) {
      wx.showLoading({
        title: '上传中' + res.progress + '%',
      })
    }
  })
}

这样，在上传头像的过程中，会展示上传进度。