文章目录
- 上传
- 下载
- 进度条
场景:要上传一个zip,调用接口,然后下载一个zip。调用接口的接口响应要显示在进度条中。
上传
上传用的是input原生控件,在页面中隐藏。accept="application/zip"
限制只能上传zip。
点击button实现上传,调用input原生组件的方法。
<el-buttontype="primary"size="large"@click="uploadSrt">上传srt</el-button
>
<inputref="srtInput"type="file"style="display: none"accept="application/zip"@change="handleUploadSrt"/>
在event中拿到上传的文件file。
注意,要使用formData和'Content-Type': 'multipart/form-data'
,以支持二进制的传输。
不能用application/json
的响应头,File对象不能被序列化为JSON。
详情看注释。
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标签则下载。
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了(可能是接口响应很快??)。
<el-progress:percentage="srtProgress"status="warning":stroke-width="12"
/>
最后改为,不要设置超时。给接口多一点时间,有道理!