vue封装请求获取上传文件进度及设置超时时间

效果图：

/utils/request.js

// 上传文件
export function uploadFile({url, data, timeout, callback}) {timeout ? service.defaults.timeout = timeout : ''return service.post(url, data, {headers: { 'Content-Type': 'multipart/form-data' },onUploadProgress: progressEvent => {callback && callback(progressEvent)}}).then(res => {return res}).catch((r) => {console.error(r)})
}
export default service

/api/print/server.js

import { uploadFile } from '@/utils/request'
// 上传打印服务更新包
export function uploadPackage(data,callback) {return uploadFile({url: '/printServer/package/file/upload',data: data,timeout: 30000,callback})
}

/views/print/server/index.vue

    // 替换更新包replacePackage(item){this.processNum = 0console.log('上传的文件：', item)const fd = new FormData()fd.append('file', item.file)// 开启lodingthis.upload_loading = truethis.pageLoading = trueuploadPackage(fd, (progressEvent) => {// console.log('上传进度:', progressEvent,parseFloat((progressEvent.loaded / progressEvent.total) * 100).toFixed(1))this.processNum = parseFloat((progressEvent.loaded / progressEvent.total) * 100).toFixed(1)if(this.processNum>=100){this.pageLoading = false}}).then(res => {console.log('文件上传结果:', res)this.pageLoading = falseif(res.code===200){this.$modal.msgSuccess('更新包上传成功，稍候更新版本号')this.isShowPackageDialog = false// this.watchServerPackage()} else {this.$modal.msgError(res.msg)}this.upload_loading = falsethis.$refs.uploader.clearFiles()}).catch(err => {console.log('文件上失败:', err)this.upload_loading = falsethis.pageLoading = falsethis.$refs.uploader.clearFiles()});},

vue封装请求获取上传文件进度及设置超时时间相关推荐

php获取文件上传进度,PHP使用APC获取上传文件进度
今天发现使用PHP的APC也能获取上传文件的进度.这篇文章就说下如何做. 安装APC 首先安装APC的方法和其他PHP模块的方法没什么两样,网上能找出好多 phpinfo可以看到APC的默认配置有: ...
vue实时上传文件进度条
vue实时上传文件进度条 //上传文件组件 <el-uploadaction:show-file-list="false":before-upload="uploa ...
vue如何优雅的上传文件
vue如何优雅的上传文件上传文件的方式 1.表单提交文件 2.Elementui封装的组件提交文件上传文件的方式下面是我使用过得两种提交方式,就详细说一下哈 1.表单提交文件 2.Element ...
java fileupload 进度_Java上传文件进度条的实现方法(附demo源码下载)
本文实例讲述了Java上传文件进度条的实现方法.分享给大家供大家参考,具体如下: 东西很简单,主要用到commons-fileupload,其中有一个progressListener的接口,该接口可以 ...
java保存图片进度条_Java上传文件进度条的实现方法(附demo源码下载)
本文实例讲述了Java上传文件进度条的实现方法.分享给大家供大家参考,具体如下: 东西很简单,主要用到commons-fileupload,其中有一个progressListener的接口,该接口可以 ...
爬虫实战学习笔记_4 网络请求urllib3模块：发送GET/POST请求实例+上传文件+IP代理+json+二进制+超时
1 urllib3模块简介 urllib3是一个第三方的网络请求模块(单独安装该模块),在功能上比Python自带的urllib强大. 1.1了解urllib3 urllib3库功能强大,条理清晰的用 ...
SpringBoot MultipartFile 监控上传文件进度
# SpringBoot MultipartFile监控上传文件进度>引用块内容在一次项目中需要监控文件上传的进度.将进度监控到之后计算百分比,存入session中session需要配置实时生 ...
根据FileUpload控件名获取上传文件(大小)类型
/// <summary> /// 根据FileUpload控件名获取上传文件(大小)类型 /// </summary> /// <param n ...
js获取上传文件内容
js 获取上传文件的字节数及内容 <div>上传文件 : <input type="file" name = "file" id = &quo ...

vue封装请求获取上传文件进度及设置超时时间

vue封装请求获取上传文件进度及设置超时时间相关推荐

最新文章

热门文章

vue封装请求 获取上传文件进度及设置超时时间

vue封装请求 获取上传文件进度及设置超时时间相关推荐

最新文章

热门文章

vue封装请求获取上传文件进度及设置超时时间

vue封装请求获取上传文件进度及设置超时时间相关推荐