基于 axios 手写文件上传,实现进度监听、上传中断
创建于:
2024-10-20
要基于 axios 手写一个文件上传组件,并实现以下功能:
- 选择文件并上传
- 监听上传进度
- 支持上传中断(取消请求)
- 处理成功和失败的回调
下面是一个完整的实现代码示例:
1. 安装依赖
npm install axios
2. 代码实现
HTML 模板示例:
<div id="app">
<input type="file" id="fileInput" />
<button id="uploadButton">上传</button>
<button id="cancelButton">取消上传</button>
<div id="progress">上传进度: 0%</div>
</div>
JavaScript 代码实现:
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'; // 替换为实际上传地址
// 创建 Axios 的取消令牌
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 处理文件上传。
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');
});
这个组件实现了完整的文件上传流程,你还可以根据需要进一步定制,比如支持多个文件、添加更多的上传校验等。
评论
没有评论。。。