详解微信小程序 wx.uploadFile 的编码坑

在使用微信小程序的 wx.uploadFile 接口上传文件时，如果没有正确处理编码问题，会导致上传的文件出现乱码或者上传失败等问题。在本文中，我们将详细讲解使用 wx.uploadFile 时可能遇到的编码坑，并给出两个具体的示例说明。

为什么会出现编码问题

wx.uploadFile 接口用于上传文件至服务器，其上传的文件包含了文件数据以及文件名称，而文件数据及文件名称中包含中文等非 ASCII 字符时，由于不同编码之间的转换可能会出现乱码或者上传失败等问题。

解决方法

为了避免出现编码问题，我们需要在上传文件前，对文件进行正确的编码转换，确保上传的文件数据和文件名称都是采用统一的编码方式，比如 UTF-8 等。常见的解决方法有：

1. 对文件名称和文件数据进行分别编码，然后再进行上传。具体来说，对文件名称采用 encodeURIComponent 进行编码，对文件数据采用 Base64 等方式进行编码。示例代码如下：

```javascript
const filePath = '/path/to/file' // 文件路径
wx.readFile({
filePath,
success: res => {
const fileData = res.data
const fileName = '中文文件名.jpg'
const encodedFileName = encodeURIComponent(fileName)
const base64Data = wx.arrayBufferToBase64(fileData)

   wx.uploadFile({
     url: 'https://example.com/upload',
     filePath,
     name: 'file',
     header: {
       'Content-Type': 'multipart/form-data',
     },
     formData: {
       filename: encodedFileName
     },
     success: res => {
       // 上传成功处理
     },
     fail: res => {
       // 上传失败处理
     }
   })
 },
 fail: err => {
   // 读取文件失败处理
 }

})
```

1. 对所有的上传数据（包括文件名称和文件数据）都采用 Base64 编码，并采用 Content-Transfer-Encoding 头部标识上传数据的编码方式。具体来说，上传文件时可以设置 header 中的 Content-Type 为 multipart/form-data;boundary=${boundary}，同时在每个上传数据项之前，需要添加一行 'Content-Type': 'text/plain'，用于标识上传数据的类型。示例代码如下：

```javascript
const filePath = '/path/to/file' // 文件路径
wx.readFile({
filePath,
success: res => {
const fileData = res.data
const fileName = '中文文件名.jpg'
const encodedFileName = encodeURIComponent(fileName)
const base64Data = wx.arrayBufferToBase64(fileData)

   const boundary = `----${Date.now()}`
   wx.uploadFile({
     url: 'https://example.com/upload',
     filePath,
     name: 'file',
     header: {
       'Content-Type': `multipart/form-data;boundary=${boundary}`,
     },
     formData: {
       filename: encodedFileName,
       filedata: `--${boundary}\r\nContent-Type: text/plain\r\nContent-Transfer-Encoding: base64\r\nContent-Disposition: form-data; name=\"filedata\"\r\n\r\n${base64Data}\r\n--${boundary}--\r\n`
     },
     success: res => {
       // 上传成功处理
     },
     fail: res => {
       // 上传失败处理
     }
   })
 },
 fail: err => {
   // 读取文件失败处理
 }

})
```

示例说明

示例一：上传 Excel 文件

假设我们需要上传一份 Excel 文件至服务器，文件名为 中文文件名.xlsx，文件路径为 /path/to/file.xlsx。可以采用如下代码进行上传：

const filePath = '/path/to/file.xlsx' // 文件路径
wx.readFile({
  filePath,
  success: res => {
    const fileData = res.data
    const fileName = '中文文件名.xlsx'
    const encodedFileName = encodeURIComponent(fileName)
    const base64Data = wx.arrayBufferToBase64(fileData)

    wx.uploadFile({
      url: 'https://example.com/upload',
      filePath,
      name: 'file',
      header: {
        'Content-Type': `multipart/form-data;boundary=${boundary}`,
      },
      formData: {
        filename: encodedFileName,
        filedata: `--${boundary}\r\nContent-Type: text/plain\r\nContent-Transfer-Encoding: base64\r\nContent-Disposition: form-data; name=\"filedata\"\r\n\r\n${base64Data}\r\n--${boundary}--\r\n`
      },
      success: res => {
        // 上传成功处理
      },
      fail: res => {
        // 上传失败处理
      }
    })
  },
  fail: err => {
    // 读取文件失败处理
  }
})

示例二：上传图片文件

假设我们需要上传一张图片至服务器，文件名为 中文文件名.jpg，文件路径为 /path/to/image.jpg。可以采用如下代码进行上传：

const filePath = '/path/to/image.jpg' // 文件路径
wx.readFile({
  filePath,
  success: res => {
    const fileData = res.data
    const fileName = '中文文件名.jpg'
    const encodedFileName = encodeURIComponent(fileName)
    const base64Data = wx.arrayBufferToBase64(fileData)

    wx.uploadFile({
      url: 'https://example.com/upload',
      filePath,
      name: 'file',
      header: {
        'Content-Type': 'multipart/form-data',
      },
      formData: {
        filename: encodedFileName,
      },
      success: res => {
        // 上传成功处理
      },
      fail: res => {
        // 上传失败处理
      }
    })
  },
  fail: err => {
    // 读取文件失败处理
  }
})

总结

在使用微信小程序的 wx.uploadFile 接口上传文件时，我们需要注意编码问题，确保上传的文件数据和文件名称都是采用统一的编码方式，以免出现乱码或者上传失败等问题。常见的解决方法就是对文件数据和文件名称进行编码转换，可以采用分别编码和统一采用 Base64 编码的方式。