【小程序教程】微信小程序之Upload文件上传_小程序上传文件

一、概述
微信小程序是一种基于移动互联网技术的轻应用，提供了许多内置的功能和API，可以方便地实现各种应用开发。其中，文件上传是一项非常常见的功能，小程序提供了upload API用于文件上传。今天，我们就来探讨一下如何使用微信小程序的upload API进行文件上传。
二、使用微信小程序之upload API

添加button

首先，在微信小程序页面中，添加一个button，该button用于触发文件上传操作。设置按钮的属性data-type=“upload”，data-count=“1”，表示该按钮用于上传文件，且最多上传一个文件。

<button data-type="upload" data-count="1">上传文件</button>
1

添加upload file组件

在微信小程序页面中，添加一个upload file组件，该组件用于选择文件。设置upload file组件的属性data-type=“upload”，data-count=“1”，表示该组件用于上传文件，且最多上传一个文件。

<upload-file data-type="upload" data-count="1" style="display: none;"></upload-file>
1

处理上传事件

当用户点击button时，触发upload file组件的click事件。在click事件处理函数中，调用微信小程序提供的wx.chooseImage API来选择文件。选择的文件信息可以通过wx.chooseImage返回的数组获得。

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

上传文件

在获取到选择的文件信息后，可以使用wx.uploadFile API将文件上传到服务器。wx.uploadFile API需要传递三个参数：文件路径、服务器URL和上传回调函数。在上传回调函数中，可以获取到服务器返回的响应信息。

wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function(res) {
      // 获取选择的文件信息
      var tempFilePaths = res.tempFilePaths;
      
      // 显示选择的文件路径
      console.log(tempFilePaths);
      
      // 上传文件到服务器
      wx.uploadFile({
        url: 'http://example.com/upload', // 你的接口地址
        filePath: tempFilePaths[0], // 文件路径，如：tempFilePath[0] 图片, tempFilePath[1] 音乐, tempFilePath[2] 视频 tempFilePath[3] 其他文件, tempFilePath[4] 语音读, tempFilePath[5] 压缩文件, tempFilePath[6] 其他文件(压缩包), tempFilePath[7] 其他文件(音频), tempFilePath[8] 其他文件(视频), tempFilePath[9] 其他文件(未知), tempFilePath[10] 其他文件(其它)等等类型，请根据类型来决定你的逻辑，比如图片转码，或者上传到云存储等。
        name: 'file', // 文件字段名，默认为file
        success: function(res) {
          // 上传成功，处理服务器返回的响应信息
          var data = res.data;
          console.log(data);
        },
        fail: function(res) {
          // 上传失败，处理上传错误
          console.error(res);
        }
      });
    }
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

注意事项：

在使用wx.uploadFile上传文件之前，需要确保服务器支持POST请求方式，并且在服务器端进行相应的处理和验证。
上传文件时，需要将文件的类型、大小等信息进行校验，确保符合服务器端的要求。可以根据文件类型选择合适的上传方式，比如图片、音频等类型的文件可以使用专门的上传接口或者进行预处理。
如果服务器返回的不是标准的JSON格式响应，需要进行相应处理。可以使用wx.showModal等接口提示用户上传成功或者失败等结果。
上传文件时，需要注意网络异常情况下的处理方式。可以使用wx.showToast等接口提示用户上传中止或者上传失败等异常情况。