微信小程序上传文件用法介绍

1. 简介

微信小程序是一种基于微信开发者工具开发的应用程序，可以在微信中运行，不需要下载和安装。微信小程序开发涉及的内容很多，其中之一就是文件上传。文件上传是指将本地文件上传到服务器，以便进行存储或后续处理。本文将详细介绍微信小程序中文件上传的用法和注意事项。

2. 文件上传的需求和场景

在实际开发中，文件上传功能广泛应用于各种场景，比如用户头像上传、图片上传、日志上传等。通过文件上传功能，用户可以将本地文件传输到服务器上，实现文件的共享和存储。微信小程序提供了丰富的API和功能，使得文件上传变得非常简单和便捷。

3. 文件上传API

在微信小程序中，主要使用wx.uploadFile()方法来实现文件上传。该方法是异步上传文件并获取服务器返回的数据。

3.1 基本语法

wx.uploadFile({
  url: '<upload-api>', // 上传接口地址
  filePath: '<temp-file-path>', // 要上传的文件的临时路径
  name: '<file-name>', // 上传文件对应的 key，后台服务器可以通过这个 key 获取文件的内容
  formData: {
    '<extra-data-key>': '<extra-data-value>' // 额外的数据
  },
  success: function (res) {
    // 上传成功的回调函数
  },
  fail: function (res) {
    // 上传失败的回调函数
  }
})

3.2 参数说明

url: 文件上传的接口地址，需要后端提供。
filePath: 要上传的文件的临时路径，可通过wx.chooseImage等选择文件API获取。
name: 上传文件对应的 key，后台服务器可以通过这个 key 获取文件的内容。
formData: 额外的数据，可以作为附加信息一并提交到服务器。
success: 上传成功的回调函数。
fail: 上传失败的回调函数。

4. 文件上传示例

下面通过一个简单的示例来演示微信小程序中如何使用文件上传功能。

4.1 前端代码

// index.wxml
<view class="container">
  <button bindtap="uploadFile">点击上传文件</button>
</view>

4.2 后端代码

// upload.php
<?php
 $file =$ _FILES['file'];
 $targetDir = "uploads/";$ targetFile =  $targetDir . basename($ file['name']);

if (move_uploaded_file( $file['tmp_name'],$ targetFile)) {
  echo "文件上传成功";
} else {
  echo "文件上传失败";
}
?>

4.3 前端逻辑

// index.js
Page({
  uploadFile: function () {
    wx.chooseImage({
      count: 1,
      success: function (res) {
        var tempFilePath = res.tempFilePaths[0];

        wx.uploadFile({
          url: '<backend-upload-api>',
          filePath: tempFilePath,
          name: 'file',
          formData: {
            'user': 'test'
          },
          success: function (res) {
            console.log(res.data);
          },
          fail: function (res) {
            console.log('上传失败');
          }
        })
      }
    })
  }
})