vue前端 下载、预览图片

news/2024/12/4 21:57:49/

前端vue,后端java。  建议使用post请求 

javascript">api.jsDownloadFileById: (config, params) => {return service.post("api/GridFS/DownloadFileById",config,params);},

a.vue页面

javascript">   /*** 获取图片* responseType: "arraybuffer" 【必传】指定后端返回的是 arraybuffer类型指定MIME类型是  type: "image/png"*/queryCheckPic(tempdata, param) {this.$luleApi.QueryCheckPic({ responseType: "arraybuffer" }, param).then((res) => {// const url = window.URL.createObjectURL(new Blob([res.data]));const blob = new Blob([res.data], { type: "image/png" });const url = URL.createObjectURL(blob);this.fatherData = {dataType: "审批流程",dataLookType: this.menuType, //==1,是审批,==2 是我的ProcessRowData: tempdata,imgUrlData: url};this.$refs.lookReadREF.readDialogVisible = true;this.$refs.lookReadREF.dialogTabletitle = "审批流程";});},下载文件/*** 下载 type: "application/octet-stream 指的是二进制流*/Download(data) {// localStorage.setItem("xzOK", "1"); //开始下载// let param = { Id: data.MongodbIds, FileName: data.DocName };let param = {Id: "67455ac4fe011820f0c1c8a6",FileName: "病人详情-实时监测(1).png"};this.$luleApi.DownloadFileById({ responseType: "arraybuffer" }, param).then((res) => {console.log('下载=====', res);const fileName = JSON.parse(res.config.data).FileName;const blob = new Blob([res.data], { type: "application/octet-stream" });debuggerconst url = URL.createObjectURL(blob);console.log(url, "下载1");const link = document.createElement("a");link.href = url;link.download = fileName; document.body.appendChild(link);link.click();document.body.removeChild(link);URL.recycleObjectURL(url);// localStorage.setItem("xzOK", "0"); //下载成功后,归0}).catch((err) => { });},

扩展:

type属性的所有可能值

type属性指定了Blob对象所包含的数据的MIME类型。MIME类型(多用途互联网邮件扩展类型)是一种标准,用来表示文档、文件或字节流的性质和格式。对于Blob对象来说,type属性的值可以是任何有效的MIME类型,包括但不限于以下一些常见的类型:

  • 文本文件:
    • text/plain:纯文本
    • text/html:HTML文档
    • text/css:CSS样式表
    • application/json:JSON数据
  • 图片文件:
    • image/jpeg:JPEG图片
    • image/png:PNG图片
    • image/gif:GIF图片
    • image/svg+xml:SVG图片
  • 音频和视频文件:
    • audio/mpeg:MP3音频
    • audio/ogg:Ogg Vorbis音频
    • video/mp4:MP4视频
    • video/webm:WebM视频
  • 其他文件类型:
    • application/pdf:PDF文档
    • application/zip:ZIP压缩文件
    • application/octet-stream:二进制流数据(通常用于未知类型的文件)

http://www.ppmy.cn/news/1552385.html

相关文章

力扣 LCR训练计划2(剑指 Offer 22. 链表中倒数第k个节点)-140

LCR训练计划2(剑指 Offer 22. 链表中倒数第k个节点)-140 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(nullptr) {}* ListNode(in…

JavaScript实现tab栏切换

JavaScript实现tab栏切换 代码功能概述 这段代码实现了一个简单的选项卡(Tab)切换功能。它通过操作 HTML 元素的类名(class)来控制哪些选项卡(Tab)和对应的内容板块显示,哪些隐藏。基本思路是先…

解决`-bash: ./configure:/bin/sh^M:解释器错误: 没有那个文件或目录`的问题

解决`-bash: ./configure:/bin/sh^M:解释器错误: 没有那个文件或目录`的问题 一、错误原因分析二、解决方法方法一:使用`dos2unix`工具方法二:使用`sed`命令方法三:使用`tr`命令方法四:在文本编辑器中转换方法五:在Windows系统中使用适当的工具三、预防措施四、总结在使…

深度学习基础03_BP算法(下)过拟合和欠拟合

目录 一、BP算法(下) 0、反向传播代码回顾 写法一: 写法二(更常用): 1、BP中的梯度下降 1.数学描述 2.传统下降方式 3.优化梯度下降方式 指数加权平均 Momentum AdaGrad RMSProp Adam(常用) 总结 二、过拟合和欠拟合 1、概念 1.过拟合 …

第 44 章 - Go语言 团队协作

在第44章中,我们将探讨团队协作的关键方面,包括版本控制系统、代码仓库管理和团队沟通与协作。为了具体化这些概念,我们将结合实际案例,并使用Go语言作为示例语言来演示如何有效地进行团队开发。 1. 版本控制系统 (Version Contr…

Go快速入门

一、环境安装 1、源码包下载 https://golang.org/dl/ https://golang.google.cn/dl/ https://studygolang.com/dl/ 2、下载解压至/usr/local tar -zxvf go1.14.4.linux-amd64.tar.gz -c /usr/local 3、cd /usr/local/go src 源码 bin go指令 gofmt指令 4、配置bin到环境…

【机器学习】支持向量机SVR、SVC分析简明教程

关于使用SVM进行回归分析的介绍很少,在这里,我们讨论一下SVR的理论知识,并对该方法有一个简明的理解。 1. SVC简单介绍 SVR全称是support vector regression,是SVM(支持向量机support vector machine)对回…

计算机毕业设计Spark+SpringBoot旅游推荐系统 旅游景点推荐 旅游可视化 旅游爬虫 景区客流量预测 旅游大数据 大数据毕业设计

温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…