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

1. 介绍

上传头像是现代社交平台中的一项常见功能。微信小程序提供了丰富的API和组件，使得实现头像上传变得非常简单。在本文中，我们将介绍如何在微信小程序中实现上传头像功能，并且将其保存到服务器。

2. 前置条件

在开始本文的实现步骤之前，我们需要一些前置条件。

2.1. 环境

首先我们需要确保使用的微信开发者工具的版本是1.02或更高。其次，我们需要拥有一个可供调试的小程序。

2.2. 组件

为了实现上传头像功能，我们需要使用微信小程序提供的组件，其中包括以下两个组件：

button 组件：用于呈现上传按钮。

image 组件：用于呈现用户上传后的头像。

2.3. API

微信小程序提供了两种不同的API，用于处理用户上传的头像。其中，wx.chooseImage API 用于从用户本地选择图片，wx.uploadFile API用于将图像上传到服务器。我们需要使用这两个API来实现头像上传功能。

3. 实现

现在我们已经准备就绪，可以开始实现上传头像功能了。

3.1. 选择图片

在这一步中，我们需要使用wx.chooseImageAPI选择并获取用户上传的头像。我们可以为上传按钮绑定bindtap事件来触发这个API，并将用户选择的图片保存到tempFilePaths列表中。

Page({
  data: {
    tempFilePaths: []
  },
  uploadAvatar: function(e) {
    var self = this
    wx.chooseImage({
      count: 1, // 仅允许上传一张图片
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        self.setData({ // 将选择的图片路径保存在tempFilePaths中
          tempFilePaths: res.tempFilePaths
        })
      }
    })
  }
})

在这里，我们设置了允许用户选择图片的数量为1，设置了不允许用户选择原始图片，只允许选择压缩后的图片，同时允许从本地相册和摄像头选择图片。选择图片成功后，我们将选择的图片路径保存在tempFilePaths中。

3.2. 上传图片

在这一步中，我们需要将用户选择的头像上传到服务器。我们可以为上传按钮绑定bindtap事件来触发wx.uploadFile API，并将图片上传到服务器，上传成功后将服务器返回的图片路径保存在avatarUrl变量中。

Page({
  data: {
    tempFilePaths: [],
    avatarUrl: ''
  },
  uploadAvatar: function(e) {
    var self = this
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        self.setData({
          tempFilePaths: res.tempFilePaths
        })
        wx.uploadFile({
          url: '', // 这里填写图片上传服务器的 URL
          filePath: this.data.tempFilePaths[0],
          name: 'file',
          formData: {
            'user_id': '1' // 将用户id添加到 formData 中
          },
          success: function(res) {
            self.setData({ // 将服务器返回的图片路径保存在 avatarUrl 中
              avatarUrl: res.data
            })
          }
        })
      }
    })
  }
})

在这里，我们设置了服务器URL和上传路径，指定了上传的文件类型为file，同时将用户的ID添加到formData中。

3.3. 显示头像

在这一步中，我们将通过image组件将用户上传的头像显示出来。因为头像上传成功后，头像的路径保存在avatarUrl变量中，所以我们将这个路径赋给image组件的src属性即可显示头像。

Page({
  data: {
    tempFilePaths: [],
    avatarUrl: ''
  },
  uploadAvatar: function(e) {
    var self = this
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        self.setData({
          tempFilePaths: res.tempFilePaths
        })
        wx.uploadFile({
          url: '', // 这里填写图片上传服务器的 URL
          filePath: this.data.tempFilePaths[0],
          name: 'file',
          formData: {
            'user_id': '1' // 将用户id添加到 formData 中
          },
          success: function(res) {
            self.setData({ // 将服务器返回的图片路径保存在 avatarUrl 中
              avatarUrl: res.data
            })
          }
        })
      }
    })
  }
})

确定用户上传的头像是有效的URL之后，我们就可以在image组件中将头像URL绑定到src属性上。

4. 总结

在这篇文章中，我们介绍了如何在微信小程序中实现上传头像功能。使用wx.chooseImage API 和wx.uploadFile API 可以从用户本地选择图像并将图像上传到服务器。我们还为上传按钮和image组件定义了一些tap事件，确保头像的选择和显示功能正常运行。