ajax上传附件进度条取消上传

有的项目会使用到附件上传,要求进度条和取消,之前没有使用axios写过,这次刚好碰到了,记录一下;

项目中版本
typescript 复制代码
"axios": "^0.27.2",
使用
typescript 复制代码
import axios from 'axios'
handleUploadAjax() {
    // 取消令牌生成器
    const CancelToken = axios.CancelToken;
    // 获取一个令牌对象, 调用source.cancel(),可以取消上传
    const source = CancelToken.source();
    let formdata = handleUploadFormdata({fileName: '', fileType: '', file: any});
     axios({
        url: 'url',
        headers: {
            'Authorization': `Bearer ${getUserToken() || ''}`,
            'Content-Type': 'multipart/form-data',
        },
        method: 'post',
        data: formdata,
        cancelToken: source.token,
        onUploadProgress: (event: any) => { // axios中自带获取文件上传进度条回调
            let percent = (event.loaded / event.total * 100).toFixed(2);
        }
    }).then((res) => {
    }).catch((err) => {
    });
}
FormData创建
typescript 复制代码
handleUploadFormdata(params: {fileName: '', fileType:'', file: any}){
    const formdata: any = new FormData();
    const entries = Object.entries(params);
    for (const [key, value] of entries) {
    formdata.append(key, value);
    };
    return formdata;
}
相关推荐
小磊哥er6 分钟前
【前端工程化】前端工作中的业务规范有哪些
前端
旷世奇才李先生11 分钟前
Next.js 安装使用教程
开发语言·javascript·ecmascript
ᥬ 小月亮17 分钟前
webpack基础
前端·webpack
YongGit36 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea2 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴2 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖2 小时前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js