小程序文件上传指南：选择、检查与上传

小程序文件上传
随着移动互联网的普及，小程序作为一种轻量级的应用程序，逐渐成为了人们日常生活中不可或缺的一部分。而在小程序开发中，文件上传功能是一个非常常见的需求。本文将重点介绍小程序文件上传中的关键技术和实现方法。
一、文件上传概述
文件上传是指用户通过小程序将本地文件上传到服务器端的过程。在实现文件上传功能时，需要解决以下几个关键问题：

1. 选择文件：小程序需要提供一种方式让用户选择要上传的文件。
2. 文件类型检查：为了保证安全性，需要对上传文件的类型进行验证。
3. 文件大小限制：需要限制用户上传的文件大小，避免上传过大文件导致服务器资源消耗过大。
4. 上传接口：需要使用服务器提供的上传接口将文件上传到服务器。
   二、选择文件
   在微信小程序中，可以使用wx.chooseImage接口让用户选择要上传的文件。该接口返回一个包含图片信息的对象，包括图片的本地路径、宽度、高度等信息。
   示例代码：

   wx.chooseImage({
   count: 1, // 默认9
   sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
   sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
   success: function (res) {
   // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
   var tempFilePaths = res.tempFilePaths
   }
   })

   三、文件类型检查和大小限制
   在选择文件后，需要对文件类型和大小进行检查。可以使用wx.getFileSystemManager接口获取文件信息，并判断文件类型和大小是否符合要求。
   示例代码：

   wx.chooseImage({
   // ...省略其他代码...
   success: function (res) {
   var tempFilePaths = res.tempFilePaths;
   wx.getFileSystemManager().readFile({
   filePath: tempFilePaths[0], // 获取第一个文件的路径
   encoding: 'base64', // 以base64格式读取文件内容
   success: function (res) {
   var fileType = res.ext; // 获取文件扩展名
   var fileSize = res.size; // 获取文件大小（单位为字节）
   if (fileType === 'jpg' || fileType === 'png' || fileType === 'gif' && fileSize <= MAX_SIZE) { // 检查文件类型和大小是否符合要求
   // 执行上传操作
   } else {
   // 文件类型或大小不符合要求，提示用户重新选择或上传其他文件
   }
   }
   });
   }
   })

   四、上传接口
   在确认文件类型和大小符合要求后，需要使用服务器提供的上传接口将文件上传到服务器。可以使用wx.uploadFile接口将文件上传到服务器。该接口需要指定服务器地址、请求方法、请求头和请求体等信息。
   示例代码：
   ```javascript
   wx.chooseImage({
   // …省略其他代码…
   success: function (res) {
   var tempFilePaths = res.tempFilePaths;
   wx.getFileSystemManager().readFile({
   filePath: tempFilePaths[0], // 获取第一个文件的路径
   encoding: ‘base64’, // 以base64格式读取文件内容
   success: function (res) {
   var fileType = res.ext; // 获取文件扩展名
   var fileSize = res.size; // 获取文件大小（单位为字节）
   if (fileType === ‘jpg’ || fileType === ‘png’ || fileType === ‘gif’ && fileSize <= MAX_SIZE) { // 检查文件类型和大小是否符合要求
   wx.uploadFile({
   url: SERVER_URL, // 服务器地址
   filePath: tempFilePaths[0], // 要上传的文件路径（以本地路径为准）
   name: ‘file’, // 在服务器端的key名，与后端要一致,key参数会自动添加到formData中与本地键对应生成 multipart/form-data 的post数据结构体。对于一般upload在formData内部手动拼接需要该参数;否则不用该参数也可以自动创建此结构体(从/recordings、/networkLog收集到此key对应formdata不存在的情况下自动添加该参数)。为了保证安全稳定性一般情况都会手动添加对应的key,而且后续新版也不会对此参数进行移除或更改。例如：我们需要在表单数据中添加一个名为“file”的字段，