axios上传二进制

原创

mob64ca12d652c7 2023-10-21 16:51:45 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12d652c7的原创作品，请联系作者获取转载授权，否则将追究法律责任

用 Axios 上传二进制文件

Axios 是一个基于 Promise 的 HTTP 客户端，它可以用于发送 HTTP 请求。在前端开发中，我们经常需要上传文件，包括图片、音频、视频等二进制文件。本文将介绍如何使用 Axios 来上传二进制文件，并提供相应的代码示例。

安装 Axios

首先，我们需要安装 Axios。可以通过 npm 或 yarn 来进行安装。在命令行中执行以下命令：

npm install axios

或

yarn add axios

安装完成后，我们就可以在项目中使用 Axios 了。

上传二进制文件

要上传二进制文件，我们需要先将文件读取为二进制数据，然后将其发送到服务器。下面是一个使用 Axios 上传二进制文件的代码示例：

// 引入 Axios
import axios from 'axios';

// 将文件读取为二进制数据
function readFileAsBinary(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsArrayBuffer(file);
  });
}

// 上传二进制文件
async function uploadBinaryFile(file) {
  try {
    // 读取文件为二进制数据
    const binaryData = await readFileAsBinary(file);

    // 创建 FormData 对象
    const formData = new FormData();
    formData.append('file', new Blob([binaryData]));

    // 发送 POST 请求
    const response = await axios.post('/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });

    console.log('上传成功', response.data);
  } catch (error) {
    console.error('上传失败', error);
  }
}

// 选择文件上传
const fileInput = document.querySelector('#file-input');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  uploadBinaryFile(file);
});

上面的代码中，我们使用了 FileReader 来读取文件为二进制数据。然后，我们使用 FormData 构造函数创建一个包含二进制数据的表单数据对象。最后，我们使用 Axios 发送 POST 请求，将表单数据作为请求体发送到服务器。

在实际项目中，你需要将 '/upload' 替换为你服务器的上传接口地址。

甘特图

下面是一个使用 Mermaid 语法绘制的上传二进制文件的甘特图：

gantt
    dateFormat  YYYY-MM-DD
    title 上传二进制文件

    section 选择文件
    选择文件      : 2022-01-01, 1d

    section 读取文件
    读取文件为二进制数据      : 2022-01-02, 2d

    section 创建表单数据
    创建 FormData 对象      : 2022-01-03, 1d

    section 发送请求
    发送 POST 请求      : 2022-01-04, 1d

    section 处理响应
    处理响应数据      : 2022-01-05, 1d

上面的甘特图展示了上传二进制文件的整个流程，包括选择文件、读取文件为二进制数据、创建表单数据、发送请求和处理响应。