【前端】上传和下载zip文件,有进度条(el-progess)

文章目录

场景:要上传一个zip,调用接口,然后下载一个zip。调用接口的接口响应要显示在进度条中。

上传

上传用的是input原生控件,在页面中隐藏。accept="application/zip"限制只能上传zip。

点击button实现上传,调用input原生组件的方法。

html 复制代码
<el-button
   type="primary"
   size="large"
   @click="uploadSrt"
   >上传srt</el-button
>
<input
   ref="srtInput"
   type="file"
   style="display: none"
   accept="application/zip"
   @change="handleUploadSrt"
 />

在event中拿到上传的文件file。

注意 ,要使用formData和'Content-Type': 'multipart/form-data',以支持二进制的传输。

不能用application/json的响应头,File对象不能被序列化为JSON。

详情看注释。

javascript 复制代码
uploadSrt() {
    this.$refs.srtInput.click()
},
// input原生控件的上传事件,file是拿到的文件
handleUploadSrt(event) {
    const file = event.target.files[0]
    this.upload(file)
},

upload(file) {
    // 用FormData,支持二进制数据传输
    let formData = new FormData()
    formData.append('file', file)

    axios
        .post('url', formData, {
        headers: {
            'Content-Type': 'multipart/form-data',
        },
        //   进度条进度
        onDownloadProgress: (progressEvent) => {
            if (progressEvent.total > 0) {
                this.srtProgress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
            } else {
                this.srtProgress = 100 // 防止progressEvent.total为0出现无限大
            }
        },
        timeout: 10000, // 设置超时时间,若接口在10s内没响应就抛出异常,在catch中捕获
    })
        .then((response) => {
        // 响应后的逻辑
    })
        .catch((error) => {
        // 异常的逻辑
    })
},

下载

请求某个接口下载文件。

请求要设置参数,表示是二进制文件:responseType: 'blob'

创建一个url和a标签,点击a标签则下载。

javascript 复制代码
download(type) {
   let url = 'url'
   axios
     .get(url, { responseType: 'blob', timeout: 10000 })
     .then((res) => {
       const fileName='' // 设置下载的文件名
       // 创建一个下载url和a标签
       const downloadUrl = window.URL.createObjectURL(new Blob([res.data])) // res.data 是要下载的文件
       const link = document.createElement('a')
       link.href = downloadUrl
       // 设置download属性,点击链接就能下载
       link.setAttribute('download', `${fileName}`)
       // 将a标签加在文档中,点击下载
       document.body.appendChild(link)
       link.click()        
     })
     .catch((error) => {
       // ...
     })
 },

进度条

用ElementPlus的组件el-progress,传入一个srtProgress即可。不过效果是一下就闪到100了(可能是接口响应很快??)。

html 复制代码
<el-progress
  :percentage="srtProgress"
  status="warning"
  :stroke-width="12"
/>

最后改为,不要设置超时。给接口多一点时间,有道理!

相关推荐
然我24 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子29 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹32 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器39 分钟前
指定阿里镜像原理
前端
枷锁—sha44 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss