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

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

news 2025/9/12 18:25:35

前言

图片在前端开发中扮演了重要的角色，它们不仅仅是美观的元素，还可以传递信息和激发用户的兴趣。随着应用场景的增多，前端开发人员就需要在图片加载过程中携带验证的信息。如 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

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2025/9/8 10:43:09

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2025/8/13 18:32:28

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/8/15 19:59:33

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

编程新知 2025/9/12 1:12:23

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

编程新知 2025/9/7 19:10:42

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2025/9/7 8:52:25

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2025/6/21 11:16:25

在Mathematica中实现Newton-Raphson迭代的收敛时间算法（一般三次多项式）

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

编程新知 2025/9/2 17:48:42

C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏介绍：《编程项目实战》 目录 一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

编程新知 2025/7/20 6:08:51

Webpack性能优化：构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

编程新知 2025/7/7 1:01:12