微信小程序实现选择媒体与本地转base64上传的后端操作指南

2023-01-25 12:18:30

在微信小程序中选择、转换和上传媒体：逐步指南

在微信小程序中，处理媒体文件（例如图片和视频）至关重要，因为它可以提升用户体验并构建更具吸引力的应用程序。本文将引导您完成选择媒体、将其转换为 base64 格式、上传到后端接口以及回显上传媒体的逐步过程。

选择媒体（图片或视频）

1. 引入 wx.chooseMedia

首先，在小程序中引入 wx.chooseMedia 方法：

const { chooseMedia } = require('@tarojs/taro')

2. 调用 wx.chooseMedia

接下来，调用 wx.chooseMedia 方法并传入所需参数：

const res = await chooseMedia({
  count: 1,
  mediaType: ['image', 'video'],
  sourceType: ['album', 'camera'],
  maxDuration: 30,
  camera: 'back'
})

参数说明：

count：选择媒体的数量（默认为 1）
mediaType：媒体类型（可以是 'image'、'video' 或 'all'）
sourceType：媒体来源（可以是 'album'、'camera' 或 'both'）
maxDuration：视频最长录制时间（默认为 10 秒）
camera：摄像头方向（可以是 'front' 或 'back'）

3. 处理选择结果

调用 wx.chooseMedia 方法后，您将收到包含选择结果的 res 对象。此对象包含一个 tempFilePath 属性，它指向所选媒体的临时文件路径。

将媒体转换为 base64 格式

1. 使用 FileReader API

要将媒体转换为 base64 格式，可以使用 FileReader API。首先，创建一个 FileReader 对象：

const reader = new FileReader()

2. 监听 FileReader 的 onload 事件

接下来，监听 FileReader 的 onload 事件，并在事件处理程序中将媒体转换为 base64 格式：

reader.onload = () => {
  const base64 = reader.result
}

3. 读取媒体文件

最后，使用 FileReader 的 readAsDataURL 方法读取媒体文件：

reader.readAsDataURL(file)

上传 base64 格式的媒体到后端接口

1. 准备后端接口

在后端服务器上，准备一个接受 base64 格式媒体数据的接口。此接口的请求方式应为 POST，并且需要接受一个名为 "media" 的字段，该字段的值就是 base64 格式的媒体数据。

2. 发送请求

使用 wx.request 方法发送请求到后端接口，并传入 base64 格式的媒体数据：

wx.request({
  url: 'http://your-server.com/upload',
  method: 'POST',
  data: {
    media: base64
  },
  success(res) {
    console.log('上传成功')
  },
  fail(err) {
    console.log('上传失败')
  }
})