水陆运输类网站如何建设,学校网站建设需要多少钱,提供手机网站制作,wordpress 文章类型模板一、文件和流的关系
文件#xff08;File#xff09;和流(Stream)是既有区别又有联系的两个概念。 文件 是计算机管理数据的基本单位#xff0c;同时也是应用程序保存和读取数据的一个重要场所。 存储介质#xff1a;文件是指在各种存储介质上#xff08;如硬盘、可…一、文件和流的关系
文件File和流(Stream)是既有区别又有联系的两个概念。 文件 是计算机管理数据的基本单位同时也是应用程序保存和读取数据的一个重要场所。 存储介质文件是指在各种存储介质上如硬盘、可移动磁盘、CD等永久存储的数据 的有序集合它是进行数据读写操作的基本对象。 特性每个文件都有文件名、文件所在路径、创建时间及访问仅限等属性。 流 是字节序列的抽象概念例如文件、输入/输出设备、内部进程通信管道等。流提供一种 向后备存储器写入字节和从后备存储器读取字节的方式。 存储介质除了和磁盘文件直接相关的文件流以外流还有多种类型。流可以分布在网络 中、内存中或者是磁带中。 上图类似于乱码就是文件流在浏览器中的表现形式。
二、前端处理文件流并下载Vue
await this.$http.request({url: /minioDownload?htitle${title}, //这里是你的请求urlresponseType: blob, //这里最重要,不要去掉method: get, //请求方式,看后台的需求,可能是get,post等方式}).then((res) {console.log(res);var elink document.createElement(a);elink.download name;elink.style.display none;var blob new Blob([res], { type: application/x-msdownload });elink.href URL.createObjectURL(blob);document.body.appendChild(elink);elink.click();document.body.removeChild(elink);this.$message.success(文件下载成功)}).catch(err {console.log(err);}); 设置Content-Type 的值为application/x-msdownload。Web 服务器需要告诉浏览器其所输出的内容的类型不是普通的文本文件或 HTML 文件而是一个要保存到本地的下载文件。 三、解决下载后打开显示不支持此文件格式
这个问题我也遇到了在网上也搜了好多资料才得到答案。
比如 是因为在 axios 中对后端的响应做了拦截所以new Blob([res])中拿到的res实际上是后端接口的 res.data只不过这一层操作在全局被封装了。 而如果直接使用的$http.get().then()并未在全局对请求进行封装拦截。所以在这里需要取得的是 res.data 于是我把new Blob([res])改成new Blob([res.data])后问题就解决了。
