微信小程序上传word、txt、Excel、PPT等文件的详解

1. 前言

微信小程序作为一款轻便的应用，得到更多的用户认可与使用。其中，小程序中上传文件是一项比较重要的功能。本篇文章将详细介绍微信小程序上传word、txt、Excel、PPT等文件的实现。

2. 微信小程序上传文件的基本原理

微信小程序上传文件的基本原理是通过微信开发者工具提供的 API 进行调用，实现将文件从本地上传到服务器的功能。在进行文件上传时，需要先调用相应的接口获取上传文件的临时路径，再将该路径提交给服务器，从而实现文件上传的目的。

2.1 微信小程序上传文件的 API 简介

微信小程序上传文件的 API 主要有以下几个：

wx.chooseMessageFile(Object object)

调用前可通过 wx.getSetting 先查询一下用户是否授权了 "scope.writePhotosAlbum" 这个 scope。该接口用于选择完成文件上传的文件，并返回文件的临时路径。其中，success 回调中返回的 tempFilePaths 数组包含了选择的文件的临时路径，按用户选择时的顺序排列，若用户取消选择，则返回值为空数组。

wx.chooseMessageFile({

  count: 1,
  type: 'file',
  success(res) {
    console.log(res.tempFiles)
  }
})

wx.uploadFile(Object object)

将本地资源上传到服务器的接口。必须使用 POST 方法请求。其中，filePath 为文件的临时路径，name 为文件对应的 key，header 中设置 content-type 为 multipart/form-data。

wx.uploadFile({

  url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
  filePath: res.tempFilePaths[0],
  name: 'file',
  formData: {
    'user': 'test'
  },
  success(res) {
    const data = res.data
    //do something
  } 
})

2.2 上传文件过程中的注意事项

2.2.1 安全问题

在文件上传的过程中，需要注意保障用户隐私和信息安全，防止恶意程序或个人通过上传文件进行攻击或者盗取用户信息。

2.2.2 文件大小限制

微信小程序对于上传文件的大小有一定的限制，如果上传文件超过限制大小，上传文件的接口将会返回错误信息。

2.2.3 文件格式限制

微信小程序上传支持多种格式的文件，但不支持所有格式。

3. 上传文件的具体实现

下面通过一个简单的示例来演示微信小程序上传文件的具体实现过程。

3.1 创建上传文件页面并绑定上传事件

首先在 wxml 文件中创建上传文件的页面，并绑定一个上传文件的事件。

<view class='upload-container'>

  <button class='upload-btn' bindtap='uploadFile'>上传文件</button>
</view>

在 js 文件中创建上传文件的事件 uploadFile，并调用 wx.chooseMessageFile 方法获取上传文件的临时路径。

Page({

  uploadFile: function () {
    wx.chooseMessageFile({
      count: 1,
      type: 'file',
      success(res) {
        console.log(res.tempFiles)
      }
    })
  }
})

3.2 完成文件上传

在选择文件之后，就可以调用 wx.uploadFile 接口上传文件，文件上传过程中，需要注意各种参数的设置以及错误的处理。

wx.chooseMessageFile({

  count: 1,
  type: 'file',
  success(res) {
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
      filePath: res.tempFilePaths[0],
      name: 'file',
      header: {
        "Content-Type": "multipart/form-data"
      },
      success(res) {
        console.log(res)
        wx.showToast({
          title: '上传成功',
          icon: 'success',
          duration: 2000
        })
      },
      fail(res) {
        wx.showToast({
          title: '上传失败',
          icon: 'none',
          duration: 2000
        })
      }
    })
  }
})

4. 总结

通过本篇文章，我们详细介绍了微信小程序上传文件的基本原理和具体实现过程。开发者可以根据自己的需要，对上传文件的功能进行定制化调整，从而更好地实现自己的业务需求。