跳至主要內容
大文件上传 -js

效果展示

首先来看看最后的效果。
image

实现思路

image
上图是大文件上传的整体流程图，显示了客户端和服务端的交互逻辑，方便大家从宏观上理解大文件上传的过程，但如果按照上面的流程讲解大文件上传入门，很容易被劝退。

子冥...大约 21 分钟飞书知识库/前端/文件上传/大文件上传相关feishu
普通文件上传

普通文件上传可以通过不同的前端技术实现。以下是使用原生 JavaScript、Vue 2 和 Vue 3 分别实现文件上传的基本示例。

原生 JavaScript

使用原生 JavaScript，你可以监听表单的提交事件，并使用 XMLHttpRequest 或 fetch API 来异步上传文件。

<form id="uploadForm" action="/ffupgrade.cgi" method="post" enctype="multipart/form-data">
    <input type="file" id="fileUpload" />
    <button type="button" onclick="uploadFile()">Upload</button>

</form>

<script>
async function uploadFile() {
    const fileInput = document.getElementById('fileUpload');
    const file = fileInput.files[0];
    if (!file) {
        alert('Please select a file first.');
        return;
    }

    const formData = new FormData();
    formData.append('file', file);

    try {
        const response = await fetch('/ffupgrade.cgi', {
            method: 'POST',
            body: formData
        });
        if (!response.ok) {
            throw new Error('Upload failed');
        }
        const data = await response.json();
        console.log('Upload successful', data);
    } catch (error) {
        console.error('Upload error:', error);
    }
}
</script>
子冥...大约 3 分钟飞书知识库/前端/文件上传/大文件上传相关feishu