axios 上传文件 封装_使用axios上传文件,如何取消上传

axios 上传文件 封装_使用axios上传文件,如何取消上传按楼上的方法,问题已决定,其实axios已经提供了方法。贴一下我自己的代码吧。//在data里声明一个sourcedata(){return{source:null,//取消上传}//上传文件letthat=this;letcancelToken=that.Axios.CancelToken;//Axios使我修改axios原型链了。that.source=cancelToken….

大家好,又见面了,我是你们的朋友全栈君。

按楼上的方法,问题已决定,其实axios已经提供了方法。

贴一下我自己的代码吧。

//在data里声明一个source

data(){

return{

source:null,//取消上传

}

//上传文件

let that = this;

let cancelToken = that.Axios.CancelToken;//Axios使我修改axios原型链了。

that.source = cancelToken.source();

var fd = new FormData();//声明formData()

fd.append(‘image’, that.$refs.upload.files[0]);

fd.append(‘filename’, that.formData.images);

fd.append(“system_type”, that.formData.systemTypeVal);

fd.append(“name”, that.formData.imagesName);

fd.append(“description”, that.formData.description);

fd.append(“system_vision”, that.formData.systemVersion);

fd.append(“disk_format”, that.formData.format);

that.Axios({//发送axios请求

method: ‘post’,

url: that.prefix + ‘/yr_images/create_image/’,

data: fd,

headers: { ‘Content-Type’: ‘multipart/form-data’ },

cancelToken:that.source.token,//取消事件

onUploadProgress(progressEvent){//上传进度条事件

if (progressEvent.lengthComputable) {

let val = (progressEvent.loaded / progressEvent.total * 100).toFixed(0);

that.formData.showProgress = true;

that.formData.startValue = parseInt(val)

}

}

})

.then(function (response) {

if (response.data.status == 1) {

if (that.formData.startValue == 100) {

util.notification(‘success’, ‘成功’, response.data.success_msg);//这是全局封装的方法,不用在意。

that.getData(1);

}

} else {

util.notification(‘error’, ‘错误’, response.data.error_msg);

}

that.modal.formVisible = false;

})

.catch(function (error) {

that.modal.loading = false;

that.modal.formVisible = false;

if(that.Axios.isCancel(error)){//主要是这里

util.notification(‘success’, ‘成功’, ‘取消上传镜像操作成功’);

}

});

}

//点击取消事件,也就是上图的取消按钮

cancel(){

let that = this;

if(that.source){//我先判断soucre是否存在,因为如果我打开弹框不作任何操作,点击取消按钮没有这一层判断的话,that.source.cancel(‘取消上传’);会报错。

that.source.cancel(‘取消上传’);//”取消上传”这几个字,会在上面catch()的error中输出的,可以console看一下。

}

that.modal.formVisible = false;

}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/148872.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • python的三种取整方式_python取整函数-取整函数,PYTHON[通俗易懂]

    python的三种取整方式_python取整函数-取整函数,PYTHON[通俗易懂]本教程分享:《python取整函数》,python有什么办法使得int按照”四舍五入”的方式取…由于小数取整会采用比较暴力的截断方式,即向下取整,所以要想使得int()按照“四舍五入”的方式取整,可以采用如下方法:5.4“四舍五入”结果为:5,int(5.4+0.5)==55.6“四舍五入”结果为:6,int(5.6+0.5)==6python为什么算除法自动取整了。如图…

    2022年10月27日
    0
  • 国产 Linux 发行版再添新成员,CutefishOS 系统简单体验

    国产 Linux 发行版再添新成员,CutefishOS 系统简单体验本文转载自IT之家随着众多开发者的加入,现代化且功能强大的Linux发行版不断涌现。现在国产Linux发行版再多一员大将,其名为CutefishOS,它在Ubuntu上提供了桌面环境,在国外Linux开源社区相当受欢迎。CuteFishOS的目标是“做更好的桌面操作系统”。为此,开发者使用KDE框架、Qt和KDEPlasma5构建一个新的桌面环境(’CuteFishDE’),似乎还借鉴了深度操作系统(DDE)、MATE和JingOS。据官网介绍,这是一款简

    2022年5月16日
    109
  • Bad Request (Invalid Hostname)什么意思? 200

    Bad Request (Invalid Hostname)什么意思? 200

    2021年9月20日
    54
  • 大数据计算框架有哪些_高中物理知识框架图

    大数据计算框架有哪些_高中物理知识框架图前言大家好,我是土哥写文章整整五个月了,在这期间写了很多篇高质量文章,每一篇都在1000+阅读以上,为了让各位小伙伴更好的学习和面试,我将自己发表的文章以及未发表的文章全部汇总成一个文档,里面包含了全部的无水印高清图片,具体内容如下:关注公众号:【3分钟秒懂大数据】,回复关键字:【大数据】,进群领取下文全部PDF文件。1、大数据学习路线文章硬不硬核,你说了算,土哥怒肝大数据学习路线一条龙!(万字长文+资源分享)上述文章将所有组件的安装包全部都收集好,版本

    2022年10月25日
    0
  • 利用Cinemachine实现相机不穿墙效果

    利用Cinemachine实现相机不穿墙效果以前一直都是代码控制,今天看见了这个插件,真的很好用,下面我们来看看,本人用的2018.1.7版本:首先呢,导入我们想用的资源点击上头编辑,选择CreatVirtualCamera拖进去Sphere,相机会跟随并且看向他点击这个按钮,可以给相机添加很多东西,这里说碰撞体Collider这是添加后多出来的组件这时候,如果后面有一堵墙,相机不会再往后靠…

    2022年5月28日
    30
  • 【LDC1314】电感传感器中文手册与检测原理介绍

    【LDC1314】电感传感器中文手册与检测原理介绍关键词:LDC1314,电感传感器,金属传感器,中文手册【声明:本博文参考TI官方手册翻译而成,旨在帮助大家快速了解这款芯片,如翻译有误欢迎评论指出,转载需注明来源!】以下是我对TI官方手册的人肉翻译,截取了其中的关键部分,有助于大家更好的撸底层驱动和排查硬件问题。相关博客:【LDC1314】金属传感器(电感传感器)的调试技巧首先,是引脚位的定义与说明:引脚 引脚类型…

    2022年6月8日
    36

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号