怎样把域名和做的网站连接不上,杭州 网站定制,品牌建设完整版,网站域名优势文章目录 上传下载进度条 场景#xff1a;要上传一个zip#xff0c;调用接口#xff0c;然后下载一个zip。调用接口的接口响应要显示在进度条中。
上传
上传用的是input原生控件#xff0c;在页面中隐藏。acceptapplication/zip限制只能上传zip。 点击button… 文章目录 上传下载进度条 场景要上传一个zip调用接口然后下载一个zip。调用接口的接口响应要显示在进度条中。
上传
上传用的是input原生控件在页面中隐藏。acceptapplication/zip限制只能上传zip。 点击button实现上传调用input原生组件的方法。
el-buttontypeprimarysizelargeclickuploadSrt上传srt/el-buttoninputrefsrtInputtypefilestyledisplay: noneacceptapplication/zipchangehandleUploadSrt/在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 urlaxios.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:percentagesrtProgressstatuswarning:stroke-width12
/最后改为不要设置超时。给接口多一点时间有道理
