微信小程序uploadFile接口实现文件上传

下面是详细的攻略：

1. 查看文档

在开始实现之前，我们首先需要查看微信小程序官方文档中的uploadFile接口的说明。

该接口用于将本地资源上传到服务器。需要注意以下几点：

• 文件上传的大小限制是 50 MB。
• 支持 HTTP POST 、HTTP PUT 方式上传。
• 支持同时上传多个文件。
• 支持上传图片、视频、音频等类型的文件。
• 支持设置请求头和自定义 formData。

2. 实现步骤

2.1 获取上传文件路径

我们需要先通过 wx.chooseImage 方法获取用户选择的文件路径。该方法的用法和限制可以查看官方文档。

示例代码：

wx.chooseImage({
  count: 1,
  sizeType: ['compressed'], // 可以指定原图或压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册或相机，默认二者都有
  success: function (res) {
    // res.tempFilePaths 是选择的图片路径数组，可通过 res.tempFilePaths[0] 获取第一张图片的路径
    var filePath = res.tempFilePaths[0];
  }
})

2.2 上传文件到服务器

获取到文件路径后，我们就可以借助 wx.uploadFile 方法将文件上传到服务器。该方法的用法和限制可以查看官方文档。

示例代码：

wx.uploadFile({
  url: 'https://example.com/upload', // 服务器上传接口地址
  filePath: filePath, // 要上传的文件路径
  name: 'file', // 服务器接收时的文件名称
  formData: {
    // 可以在这里添加额外的参数
    user: 'xiaoming',
    age: 18
  },
  success: function (res) {
    console.log(res.data) // 上传成功，返回服务器端的响应数据
  }
})

在以上代码中，我们需要注意以下几点：

• wx.uploadFile 方法需要设置 url 、filePath、name 这三个参数。
• formData 用来设置上传文件时的额外参数，可以根据需要自行添加。
• 文件上传完成后，服务器会返回响应数据，这里我们可以根据具体情况进行处理。

3. 示例

下面是将文件上传到七牛云的一个完整示例：

wx.chooseImage({
  count: 1,
  sizeType: ['compressed'],
  sourceType: ['album', 'camera'],
  success: function (res) {
    var filePath = res.tempFilePaths[0];

    // 获取上传凭证
    wx.request({
      url: 'https://example.com/getUploadToken',
      success: function (data) {
        var token = data.data;

        // 上传文件
        wx.uploadFile({
          url: 'https://upload.qiniup.com',
          filePath: filePath,
          name: 'file',
          formData: {
            token: token
          },
          success: function (res) {
            // 上传成功，返回七牛云文件 URL
            console.log('https://cdn.example.com/' + res.data.key);
          }
        })
      }
    })
  }
})

在上述示例中，我们从相册或相机中选择一张图片，然后发起了一个 wx.request 请求，用于获取上传凭证。得到凭证后，我们再通过 wx.uploadFile 方法将文件上传到七牛云，并且在上传成功后，打印出了上传后的文件 URL。

另外，我们也可以在服务器端设置回调地址，这样在文件上传完成后，服务器就会主动向该地址发送通知。具体的步骤可以查看七牛云官方文档。