当前位置： 首页 > news >正文

探索前端图片如何携带token进行验证

news 2026/3/30 11:51:45

前言

图片在前端开发中扮演了重要的角色，它们不仅仅是美观的元素，还可以传递信息和激发用户的兴趣。随着应用场景的增多，前端开发人员就需要在图片加载过程中携带验证的信息。如 token，用于身份验证、权限控制等方面。通过在图片的 URL 或请求头中携带 token 信息，从而实现图片信息的安全传输。

实现思路

  1. 创建一个名为 tokenImg 的组件，该组件用于显示图片并支持预览功能；
  2. 在组件的模板中，使用 <img> 标签来显示图片，或使用 element-ui 的 <el-image> 标签进行图片预览；
  3. 在组件的属性中，接收图片的 URL 地址 (imgUrl)、图片类型 (imgType)、图片的宽度 (width) 和高度 (height)；
  4. 在组件的数据中，定义预览图片列表 (previewList) 和预览图片路径 (previewpath)；
  5. 实现两个方法 viewModel() 和 preViewModel() 分别用于仅预览图片和带缩略图预览；
  6. 在 viewModel() 方法中，通过调用下载文件的 API (downloadFileApi) 并根据返回的文件内容创建 URL 对象，将图片 URL 赋值给 <img> 标签的 src 属性；
  7. 在 preViewModel() 方法中，同样调用下载文件的 API，将返回的文件内容创建 URL 对象，并将 URL 添加到预览图片列表中；
  8. 使用 watch 监听 imgUrl 属性的变化，在变化时根据 imgType 属性的值来调用对应的方法；
  9. 在组件的 mounted() 钩子中，根据初始的 imgType 属性值来调用对应的方法；
  10. 在 main.js 文件中将 tokenImg 组件注册为全局组件，以便在其他地方使用；
  11. 在需要使用该组件的地方，使用 <TokenImg> 标签，并传递相应的属性（如图片 URL、图片类型、宽度和高度）；
    这样，你可以在前端中使用 tokenImg 组件来显示带有 Token 的图片，并支持预览功能。注意确保在组件使用时传递正确的图片 URL、类型、宽度和高度。

封装文件

<template><div><!-- 显示图片 --><img ref="img" :style="{width:width,height:height}" v-if="imgType == 'view'" /><!-- 使用element-ui的el-image进行图片预览 --><el-image :style="{width:width,height:height}" ref="previewimg" v-if="imgType == 'preView'" :src="previewpath":preview-src-list="previewList"></el-image></div>
</template>
<script>
// 引入的接口文件
import { downloadFileApi } from "@/api/publicApi/enumeration";
export default {name: "token-img",props: {// 图片的URL地址imgUrl: {type: String,},// 图片类型，可选为'view'（仅预览图片）或'preView'（可点击预览）imgType: {type: String,default: "view",},// 图片的宽度width: {type: String,},// 图片的高度height: {type: String,},},data() {return {// 预览图片列表previewList: [],// 预览图片路径previewpath: "",};},methods: {//仅预览图片viewModel() {const img = this.$refs.img;// 调用下载文件的API并根据返回的文件内容创建URL对象downloadFileApi(this.imgUrl).then((res) => {img.src = URL.createObjectURL(res);img.onload = () => {URL.revokeObjectURL(img.src);};});},//带缩略图预览preViewModel() {downloadFileApi(this.imgUrl).then((res) => {// 调用下载文件的API并根据返回的文件内容创建URL对象this.previewpath = URL.createObjectURL(res);this.previewList.push(this.previewpath);});},},watch: {// 监听imgUrl变化imgUrl() {if (this.imgType == "view") {this.viewModel();} else if (this.imgType == "preView") {this.preViewModel();}},},mounted() {if (this.imgType == "view") {this.viewModel();} else if (this.imgType == "preView") {this.preViewModel();}},
};
</script>

引入的接口文件

export function downloadFileApi(imgUrl) {return request({url: "/api/file/examine-preview"+imgUrl,method: "get",responseType: "blob",});
}

main.js

// 将其注册为全局组件
import TokenImg from "@/components/tokenImg";
Vue.component('TokenImg', TokenImg)

使用文件

<TokenImg :width="`50px`" :height="`50px`" :imgUrl="YourUrl" :imgType="`preView`"/>

实现效果

发起请求

在这里插入图片描述

渲染查看

在这里插入图片描述

拓展

下载文件携带 token

第一种方式：手写实现

//下载方法
getBgdzByGcsj(row) {// 通过接口下载文件downloadFileApiDown(row.bgdz).then((res) => {// 将文件流转换为下载链接const downloadUrl = URL.createObjectURL(res);// 创建一个<a>标签const link = document.createElement("a");// 设置链接的URL为下载链接link.href = downloadUrl;// 设置下载的文件名为"报表管理.xls"link.download = "报表管理.xls";// 隐藏<a>标签link.style.display = "none";// 将<a>标签添加到页面的<body>中document.body.appendChild(link);// 触发<a>标签的点击事件，开始下载link.click();// 下载完成后删除<a>标签document.body.removeChild(link);});
}

第二种方式：使用插件（file-saver）

file-saver 是一个 JavaScript 库，用于在浏览器中保存文件。它提供了一种简单的方法来生成并保存文件，而不需要服务器参与。使用 file-saver 插件，你可以轻松地在前端生成和下载文件，无需发送文件请求到服务器和返回文件链接，大大简化了文件下载的过程。

file-saver 插件的主要功能是将通过 Blob 对象生成的文件下载链接保存到浏览器的下载路径中。它提供了以下几种方法：

1. saveAs 方法

保存文件到本地。你可以使用 saveAs 方法来指定文件的内容和名称，然后将其保存到浏览器的下载路径。

2. save 方法

保存文件到本地，与 saveAs 方法类似，但不会弹出文件保存对话框。

3. createObjectURL 方法

创建 Blob 对象的 URL。通过 createObjectURL 方法，你可以将 Blob 对象转换为可供下载的 URL。

4. revokeObjectURL 方法

释放之前创建的 URL。一旦文件下载完成，你可以使用 revokeObjectURL 方法来释放已经创建的 URL，以释放浏览器资源。

  • 安装

    npm install file-saver

  • 引入

    import { saveAs } from 'file-saver';

  • 使用

    // res 返回地址
saveAs(res, '报表管理.xls');

相关文章：

探索前端图片如何携带token进行验证

前言 图片在前端开发中扮演了重要的角色&#xff0c;它们不仅仅是美观的元素&#xff0c;还可以传递信息和激发用户的兴趣。随着应用场景的增多&#xff0c;前端开发人员就需要在图片加载过程中携带验证的信息。如 token&#xff0c;用于身份验证、权限控制等方面。通过在图片的…...

编程日记 2023/7/31 11:38:00

飞桨AI Studio可以玩多模态了？MiniGPT4实战演练！

MiniGPT4是基于GPT3的改进版本&#xff0c;它的参数量比GPT3少了一个数量级&#xff0c;但是在多项自然语言处理任务上的表现却不逊于GPT3。项目作者以MiniGPT4-7B作为实战演练项目。 创作者&#xff1a;衍哲 体验链接&#xff1a; https://aistudio.baidu.com/aistudio/proj…...

编程日记 2023/7/31 11:36:59

C++笔记之++i和i++是原子操作吗？

C笔记之i和i是原子操作吗&#xff1f; code review! 文章目录 C笔记之i和i是原子操作吗&#xff1f;1.i是原子操作吗&#xff1f;2.i是原子操作吗&#xff1f;3.前置递增和后置递增 1.i是原子操作吗&#xff1f; 2.i是原子操作吗&#xff1f; 3.前置递增和后置递增...

编程日记 2023/7/31 11:35:58

Pytest+Allure+Excel接口自动化测试框架实战

1. Allure 简介 简介 Allure 框架是一个灵活的、轻量级的、支持多语言的测试报告工具&#xff0c;它不仅以 Web 的方式展示了简介的测试结果&#xff0c;而且允许参与开发过程的每个人可以从日常执行的测试中&#xff0c;最大限度地提取有用信息。 Allure 是由 Java 语言开发…...

编程日记 2023/7/31 11:34:56

阿里云国际版账号注册常见问题汇总

公司现与阿里云国际站达成战略合作&#xff0c;为客户提供高品质、高性能、高可用的阿里云产品与服务&#xff0c;助力客户用云服务创造更多价值&#xff0c;达成业务转型、加速和创新&#xff0c;全面提升业务竞争力。助企业在各种业务场景中充分利用混合云基础设施进行优化。…...

编程日记 2023/7/31 11:33:55

Flowable基础

简介 Flowable 是 BPMN 的一个基于 java 的软件实现&#xff0c;不过 Flowable 不仅仅包括 BPMN &#xff0c;还有 DMN 决策表和 CMMN Case 管理引擎&#xff0c;并且有自己的用户管理、微服务 API 等一系列功能&#xff0c; 是一个服务平台。 官方手册&#xff1a; https://…...

编程日记 2023/7/31 11:32:53

力扣热门100题之合并区间【中等】

题目描述 以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#xff0c;该数组需恰好覆盖输入中的所有区间 。 示例 1&#xff1a; 输入&#xff1a;interv…...

编程日记 2023/7/31 11:31:53

机会成本：隐形的手，驱动你的选择

机会成本这个词不知道你有没有听说过。 机会成本是指在面临多方案择一决策时&#xff0c;被舍弃的选项中的最高价值者。换句话说&#xff0c;机会成本是一种失去的收益&#xff0c;不是实际支付的成本。 机会成本是经济学中一个非常重要的概念&#xff0c;它可以帮助我们更好地…...

编程日记 2023/7/31 11:30:52

win10日程怎么同步到安卓手机？电脑日程同步到手机方法

在如今快节奏的生活中&#xff0c;高效地管理时间变得至关重要。而对于那些经常在电脑上安排日程的人来说&#xff0c;将这些重要的事务同步到手机上成为了一个迫切的需求。因为目前国内使用win10系统电脑、安卓手机的用户较多&#xff0c;所以越来越多的职场人士想要知道&…...

编程日记 2023/7/31 11:29:49

7月31日每日两题

第一题：再解炸弹人 小哼最近爱上了“炸弹人”游戏。你还记得在小霸王游戏机上的炸弹人吗？用放置炸弹的方法来消灭敌人。需将画面上的敌人全部消灭后，并找到隐藏在墙里的暗门才能过关。 现在有一个特殊的关卡如下。你只有一枚炸弹，但是这枚炸弹威力超强（杀伤距离超长，可…...

编程日记 2023/7/31 11:28:46

首期华为云ROMA Connect《企业集成战略与华为数字化之道》高研班在东莞圆满举办

7月25日&#xff0c;首期华为云ROMA Connect《企业集成战略与华为数字化之道》高研班在东莞华为制造业数字化转型中心圆满举办。 20多家东莞精密机械、电子、环保等领域的先进企业董事长、总经理、CIO、总监等高管参加培训。 本次高研班邀请到华为数字化转型专家陈劲、马兵东…...

编程日记 2023/7/31 11:27:46

JS语法知识点

变量声明&#xff1a; 使用 var 关键字声明的变量具有函数作用域&#xff0c;可以在函数内部访问。使用 let 或 const 关键字声明的变量具有块级作用域&#xff0c;只在声明的块内有效。 数据类型&#xff1a; 字符串&#xff08;String&#xff09;&#xff1a;表示文本数据&a…...

编程日记 2023/7/31 11:25:42

【设计模式】 策略模式

策略模式&#xff08;Strategy Pattern&#xff09;是一种行为型设计模式&#xff0c;它定义了一系列算法&#xff0c;将每个算法封装起来&#xff0c;使它们可以相互替换&#xff0c;让客户端代码和算法的具体实现解耦。这样&#xff0c;客户端可以根据不同的需求选择不同的算…...

编程日记 2023/7/31 11:24:41

Redis优惠券秒杀超卖问题

Redis秒杀超卖问题 前言一、出现秒杀超卖的原因二、超卖解决方案使用乐观锁解决超卖问题程序中进行解决 前言 这是我认为b站上最好的redis教程&#xff0c;各方面讲解透彻&#xff0c;知识点覆盖比较全。 黑马redis视频链接&#xff1a;B站黑马redis教学视频 本文参考黑马redi…...

编程日记 2023/7/31 11:23:39

14个最强大的建筑设计AI工具

在整个行业中&#xff0c;建筑师在他们的创造性追求中正在拥抱一个新的合作伙伴&#xff1a;AI。 一旦受到重复和单调的困扰&#xff0c;建筑工人发现自己正处于数字革命的风口浪尖&#xff0c;其中比特和字节掌握着自动化和曾经难以想象的可能性的关键。 推荐&#xff1a;用 …...

编程日记 2023/7/31 11:22:37

Ueditor 百度强大富文本Springboot 项目集成使用(包含上传文件和上传图片的功能使用)简单易懂，举一反三

Ueditor 百度强大富文本Springboot 项目集成使用 首先如果大家的富文本中不考虑图片或者附件的情况下&#xff0c;只考虑纯文本且排版的情况下我们可以直接让前端的vue来继承UEditor就可以啦。但是要让前端将那几个上传图片和附件的哪些功能给阉割掉&#xff01; 然后就是说如…...

编程日记 2023/7/31 11:21:36

【NLP】一个使用PyTorch实现图像分类的迁移学习实例

一个使用PyTorch实现图像分类的迁移学习实例 1. 导入模块2. 加载数据3. 模型处理4. 训练及验证模型5. 微调6. 其他代码 在特征提取中&#xff0c;可以在预先训练好的网络结构后修改或添加一个简单的分类器&#xff0c;然后将源任务上预先训练好的网络作为另一个目标任务的特征提…...

编程日记 2023/7/31 11:20:32

【wsl-windows子系统】安装、启用、禁用以及同时支持docker-desktop和vmware方案

如果你要用docker桌面版&#xff0c;很可能会用到wsl&#xff0c;如果没配置好&#xff0c;很可能wsl镜像会占用C盘很多空间。 前提用管理员身份执行 wsl-windows子系统安装和启用 pushd "%~dp0" dir /b %SystemRoot%\servicing\Packages\*Hyper-V*.mum >hyper…...

编程日记 2023/7/31 11:19:31

使用docker部署springboot微服务项目

文章目录 1. 环境准备1. 准备好所用jar包项目2.编写相应的Dockerfile文件3.构建镜像4. 运行镜像5. 测试服务是否OK6.端口说明7.进入容器内8. 操作容器的常用命令 1. 环境准备 检查docker是否已安装 [rootlocalhost /]# docker -v Docker version 1.13.1, build 7d71120/1.13.…...

编程日记 2023/7/31 11:18:30

uniapp兼容微信小程序和支付宝小程序遇到的坑

1、支付宝不支持v-show 改为v-if。 2、v-html App端和H5端支持 v-html &#xff0c;微信小程序会被转为 rich-text&#xff0c;其他端不支持 v-html。 解决方法&#xff1a;去插件市场找一个支持跨端的富文本组件。 3、导航栏处有背景色延伸至导航栏外 兼容微信小程序和支…...

编程日记 2023/7/31 11:17:29

避坑指南：单相有源逆变电路Simulink仿真中那些教科书没讲的细节（附反电动势设置模板）

单相有源逆变电路Simulink仿真实战&#xff1a;从参数配置到波形调试的工程化指南 第一次在Simulink里搭建单相有源逆变电路时&#xff0c;看着报错窗口弹出的"Algebraic loop detected"提示&#xff0c;我盯着屏幕足足愣了五分钟。教科书上明明写着"连接好器件…...

编程新知 2026/3/30 11:09:38

如何彻底解决Zotero-GPT集成中的AI调用故障：从诊断到优化的完整技术指南

如何彻底解决Zotero-GPT集成中的AI调用故障&#xff1a;从诊断到优化的完整技术指南 【免费下载链接】zotero-gpt GPT Meet Zotero. 项目地址: https://gitcode.com/gh_mirrors/zo/zotero-gpt Zotero-GPT项目作为文献管理工具与大型语言模型的深度集成方案&#xff0c;为…...

编程新知 2026/3/30 10:12:03

3D Face HRN真实案例：用于司法鉴定中面部特征三维比对辅助系统

3D Face HRN真实案例&#xff1a;用于司法鉴定中面部特征三维比对辅助系统 1. 引言&#xff1a;从平面照片到三维证据的突破 在司法鉴定领域&#xff0c;面部特征比对一直是身份识别的重要技术手段。传统的2D照片比对方法存在角度、光照、表情等多重限制&#xff0c;往往难以…...

编程新知 2026/3/30 9:35:52

ESP8266配网总失败？详解AirLink和SoftAP两种模式在机智云项目中的实战区别与选择

ESP8266配网失败全解析&#xff1a;从AirLink到SoftAP的深度诊断手册 配网失败时&#xff0c;ESP8266的红色LED灯常亮像在嘲笑你的无能——这可能是物联网开发者最熟悉的挫败感。当机智云项目卡在最后10%的配网环节&#xff0c;那种"硬件没问题、代码没报错&#xff0c;但…...

编程新知 2026/3/30 9:27:51

通达信顶底背离副图指标源码解析与实战应用

1. 通达信顶底背离副图指标入门指南 第一次接触顶底背离指标时&#xff0c;我也被那些复杂的线条和公式搞得一头雾水。后来才发现&#xff0c;这其实是技术分析中最实用的趋势反转信号工具之一。简单来说&#xff0c;顶底背离就是当价格创新高或新低时&#xff0c;指标却没有同…...

编程新知 2026/3/30 9:15:45

终极Node.js无头浏览器测试指南：Zombie.js与Mocha集成实战

终极Node.js无头浏览器测试指南&#xff1a;Zombie.js与Mocha集成实战 【免费下载链接】zombie Insanely fast, full-stack, headless browser testing using node.js 项目地址: https://gitcode.com/gh_mirrors/zo/zombie 在当今快速发展的Web开发领域&#xff0c;Zomb…...

编程新知 2026/3/30 8:43:30

51单片机+DAC0832信号发生器实战：从硬件搭建到波形调试全记录（附避坑指南）

51单片机DAC0832信号发生器实战&#xff1a;从硬件搭建到波形调试全记录&#xff08;附避坑指南&#xff09; 在电子设计领域&#xff0c;信号发生器是工程师和爱好者不可或缺的工具。传统商用设备虽然功能强大&#xff0c;但对于学习嵌入式系统和数模转换原理而言&#xff0c;…...

编程新知 2026/3/30 8:17:22

RMBG-2.0 API调用教程：Python requests调用+返回透明PNG二进制流解析

RMBG-2.0 API调用教程&#xff1a;Python requests调用返回透明PNG二进制流解析 1. 快速了解RMBG-2.0 RMBG-2.0是一款轻量级的AI图像背景去除工具&#xff0c;它能在保持高精度的同时&#xff0c;大幅降低硬件要求。无论你是开发者还是普通用户&#xff0c;都能轻松上手使用。…...

编程新知 2026/3/30 8:01:13

Eigen矩阵打印踩坑记：从乱码到优雅输出的3个关键技巧与一个隐藏Bug

Eigen矩阵打印踩坑记&#xff1a;从乱码到优雅输出的3个关键技巧与一个隐藏Bug 第一次在ROS项目里调试Eigen矩阵时&#xff0c;我盯着终端里歪歪扭扭的数字对齐和突然冒出的科学计数法&#xff0c;花了整整两小时才意识到这不是算法问题&#xff0c;而是输出格式在作祟。Eigen作…...

编程新知 2026/3/30 7:23:01

Youtu-VL-4B-Instruct效果可视化：热力图呈现视觉词注意力与文本对齐关系

Youtu-VL-4B-Instruct效果可视化&#xff1a;热力图呈现视觉词注意力与文本对齐关系 1. 引言&#xff1a;当模型“看见”并“思考”时&#xff0c;它在看哪里&#xff1f; 想象一下&#xff0c;你给一个AI模型看一张照片&#xff0c;然后问它&#xff1a;“图片里有什么&…...

编程新知 2026/3/30 7:10:57