基于 axios 手写文件上传，实现进度监听、上传中断
要基于 axios 手写一个文件上传组件，并实现以下功能：
- 选择文件并上传
- 监听上传进度
- 支持上传中断（取消请求）
- 处理成功和失败的回调
下面是一个完整的实现代码示例：
1. 安装依赖
2. 代码实现
HTML 模板示例：
1
2
3
4
5
6
| <div id="app">
<input type="file" id="fileInput" />
<button id="uploadButton">上传</button>
<button id="cancelButton">取消上传</button>
<div id="progress">上传进度: 0%</div>
</div>
|
JavaScript 代码实现：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
| import axios from 'axios';
let cancelTokenSource = null;
document.getElementById('uploadButton').addEventListener('click', () => {
const fileInput = document.getElementById('fileInput');
if (fileInput.files.length === 0) {
alert('请选择文件');
return;
}
const file = fileInput.files[0];
uploadFile(file);
});
document.getElementById('cancelButton').addEventListener('click', () => {
if (cancelTokenSource) {
cancelTokenSource.cancel('上传已取消');
}
});
function uploadFile(file) {
const url = 'https://your-upload-endpoint.com/upload';
cancelTokenSource = axios.CancelToken.source();
const formData = new FormData();
formData.append('file', file);
axios.post(url, formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
cancelToken: cancelTokenSource.token,
onUploadProgress: (progressEvent) => {
const percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
document.getElementById('progress').innerText = `上传进度: ${percentCompleted}%`;
},
})
.then((response) => {
alert('上传成功');
console.log(response.data);
})
.catch((error) => {
if (axios.isCancel(error)) {
console.log('上传被取消:', error.message);
} else {
console.error('上传失败:', error);
alert('上传失败');
}
});
}
|
3. 代码说明
- 选择文件并上传：用户点击上传按钮时，调用 uploadFile 函数，将文件上传到指定的服务器端。
- 监听上传进度：使用 onUploadProgress 回调函数来实时更新进度。
- 支持上传中断：使用 axios.CancelToken 创建可取消的请求，并在用户点击“取消上传”按钮时触发中断。
- 处理错误：区分普通错误和用户主动取消上传的情况。
4. 效果预览
- 进度监听：上传时，页面上会实时显示百分比。
- 取消上传：上传过程中的任何时间都可以中断请求。
5. 服务器端（可选参考）
后端需要支持接收 multipart/form-data 请求。如果你使用的是 Node.js，可以用 express 搭配 multer 处理文件上传。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
const app = express();
app.post('/upload', upload.single('file'), (req, res) => {
console.log('文件信息:', req.file);
res.send({ status: '上传成功' });
});
app.listen(3000, () => {
console.log('服务器启动在 http://localhost:3000');
});
|
这个组件实现了完整的文件上传流程，你还可以根据需要进一步定制，比如支持多个文件、添加更多的上传校验等。
