axios-miniprogram/docs/pages/basics/upload.md

title
上传文件

{{ $frontmatter.title }}

::: tip {{ $frontmatter.title }} 将本地资源上传到服务器。 :::

::: warning 注意 上传文件只能使用 POST 方法请求，并将请求配置项 upload 设置为 true。 :::

普通的上传请求

可以将本地资源上传到服务器。

import axios from 'axios-miniprogram';

axios('https://api.com/test', {
  method: 'POST',
  upload: true,
  data: {
    // 文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
    name: 'fileName',

    // 要上传文件资源的路径 (本地路径)
    filePath: '你的本地路径',
  },
})
  .then((response) => {
    const {
      // 开发者服务器返回的数据
      data,
    } = response;
  })
  .catch((error) => {
    // 失败之后做些什么
  });

携带 formData 的上传请求

也可以携带额外的 formData 发送给服务端。

import axios from 'axios-miniprogram';

axios('https://api.com/test', {
  method: 'POST',
  upload: true,
  data: {
    // 文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
    name: 'fileName',

    // 要上传文件资源的路径 (本地路径)
    filePath: '你的本地路径',

    // 这是额外的 formData 属性
    id: 1,

    // 这是额外的 formData 属性
    user: '123',
  },
})
  .then((response) => {
    const {
      // 开发者服务器返回的数据
      data,
    } = response;
  })
  .catch((error) => {
    // 失败之后做些什么
  });

监听上传进度

也可以监听上传进度变化。

import axios from 'axios-miniprogram';

axios('https://api.com/test', {
  method: 'POST',
  upload: true,
  data: {
    // 文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
    name: 'fileName',

    // 要上传文件资源的路径 (本地路径)
    filePath: '你的本地路径',

    // 这是额外的 formData 属性
    id: 1,

    // 这是额外的 formData 属性
    user: '123',
  },
  onUploadProgress(event) {
    const {
      // 上传进度
      progress,

      // 已经上传的数据长度
      totalBytesSent,

      // 预期需要上传的数据总长度
      totalBytesExpectedToSend,
    } = event;
  },
})
  .then((response) => {
    const {
      // 开发者服务器返回的数据
      data,
    } = response;
  })
  .catch((error) => {
    // 失败之后做些什么
  });