axios 文件上传过大 failed

原创

mob64ca12f86e32 2024-09-04 03:37:21 ©著作权

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

使用 Axios 实现文件上传并处理大文件的错误

文件上传是现代 web 应用中常见的功能，尤其是当用户需要上传较大的文件时，可能会遇到一些问题，如“文件过大”错误。本文将详细介绍如何使用 Axios 实现文件上传，并处理上传失败的情况。

1. 整体流程

首先，让我们来看看实现文件上传的整体流程。下面的表格展示了实现过程的步骤：

步骤	说明	代码示例
1	创建 HTML 表单用于文件选择	`<input type="file" id="fileInput">`
2	使用 Axios 发送文件上传请求	`axios.post(url, formData)`
3	处理服务器响应（成功或失败）	`.then(response => { ... })`
4	错误处理，特别是文件过大时的错误处理	`.catch(error => { ... })`

2. 每一步的详细说明

接下来，我们逐步讲述每一步需要做什么，以及相应的代码示例。

步骤 1: 创建 HTML 表单

我们首先需要一个 HTML 表单来让用户选择文件。以下是一个文件输入元素的简单示例：

<form id="uploadForm">
    <input type="file" id="fileInput" />
    <button type="submit">上传</button>
</form>

说明：<input type="file"> 元素允许用户选择要上传的文件。按钮用于提交表单。

步骤 2: 使用 Axios 发送文件上传请求

在用户选择文件并提交时，我们需要使用 Axios 发送一个 POST 请求。我们将文件封装在 FormData 对象中，以便可以发送到服务器。

document.getElementById('uploadForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 防止表单默认提交

    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0]; // 获取用户选择的文件

    const formData = new FormData();
    formData.append('file', file); // 将文件添加到 FormData 对象

    const url = '/upload'; // 您的上传接口

    // 发送 POST 请求
    axios.post(url, formData)
        .then(response => {
            console.log('上传成功:', response.data);
        })
        .catch(error => {
            console.error('上传失败:', error);
        });
});

说明：

event.preventDefault(); 防止表单的默认提交行为。

fileInput.files[0] 获取用户选择的第一个文件。

FormData 用于构建要发送的数据；formData.append('file', file); 将文件添加进 FormData。

axios.post(url, formData); 发送 POST 请求。

步骤 3: 处理服务器响应

在 .then() 中，你可以处理服务器的响应。如果响应成功，你可以执行相应的操作，比如显示成功消息、更新 UI 等。

步骤 4: 错误处理

你需要处理上传过程中可能发生的错误，特别是“文件过大”这个常见错误。可以根据服务器的响应状态来判断。

.catch(error => {
    if (error.response) {
        // 请求已发出，但服务器响应了状态码
        if (error.response.status === 413) {
            console.error('上传的文件过大，请选择更小的文件。');
        } else {
            console.error('其他错误:', error.response.data);
        }
    } else if (error.request) {
        // 请求已发出，但没有收到回应
        console.error('未收到响应:', error.request);
    } else {
        // 发生了其他错误
        console.error('错误:', error.message);
    }
});

说明：

error.response 是 Axios 捕获到的响应信息。

error.response.status 用于检查 HTTP 状态代码，413 状态代码表示请求实体过大。

error.request 中的讯息用于捕获请求发送后未收到响应的情况。

3. 关系图示例

为了帮助理解整个流程，下面是一个简单的关系图，用于展示文件上传流程：

erDiagram
    User ||--o{ FileInput : selects
    FileInput ||--o{ FormData : builds
    FormData ||--o{ Axios : sends
    Axios ||--o| Response : receives
    Response ||--o| Error : checks