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

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

news 文章来源：https://blog.csdn.net/Shids_/article/details/131851632 2025/5/25 14:38:42

前言

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

LeetCode208.Implement-Trie-Prefix-Tree＜实现 Trie (前缀树)＞

题目&#xff1a; 思路&#xff1a; tire树&#xff0c;学过&#xff0c;模板题。一种数据结构与算法的结合吧。 代码是&#xff1a; //codeclass Trie { private:bool isEnd;Trie* next[26]; public:Trie() {isEnd false;memset(next, 0, sizeof(next));}void insert(strin…...

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

第1章 JavaScript简史

JavaScript的起源 JavaScript是Netscape公司与Sun公司合作开发的在JavaScript诞生之前游览器就是显示超文本文档的简单的软件&#xff0c;JavaScript为此增加了交互行为ECMAScript是JavaScript的标准化&#xff0c;本质上是同一个语言JavaScript是一门脚本语言通常只能运行在游…...

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

DevOps-GitHub/GitLab

DevOps-GitHub/GitLab GitHub是一个开源代码托管平台。基于web的Git仓库&#xff0c;提供共有仓库和私有仓库&#xff08;私有仓库收费&#xff09;。 GitLab可以创建免费私有仓库。 GitHub 为了快速操作&#xff0c;这里对创建仓库以及注册不做说明。 首先再GitHub上创建一…...

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

redis群集(主从复制)

---------------------- Redis 主从复制 ---------------------------------------- 主从复制&#xff0c;是指将一台Redis服务器的数据&#xff0c;复制到其他的Redis服务器。前者称为主节点(Master)&#xff0c;后者称为从节点(Slave)&#xff1b;数据的复制是单向的&#xf…...

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

F5 LTM 知识点和实验 5-健康检测

第五章：健康检测 监控的分类： 地址监控（3层）服务监控（4层）内容监控（7层）应用监控（7层）性能监控（7层）路径监控（3、4、7层）三层监控： 三层监控可以帮助bipip系统通过检查网络是否可达监视资源。比如使用icmp echo，向监控节点发送icmp_echo报文，如果接收到响应…...

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

❤️创意网页：能量棒页面 - 可爱版（加载进度条）

✨博主&#xff1a;命运之光 &#x1f338;专栏&#xff1a;Python星辰秘典 &#x1f433;专栏&#xff1a;web开发&#xff08;简单好用又好看&#xff09; ❤️专栏&#xff1a;Java经典程序设计 ☀️博主的其他文章&#xff1a;点击进入博主的主页 前言&#xff1a;欢迎踏入…...

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

C语言中的操作符（万字详解）

C语言中的操作符&#xff08;万字详解&#xff09; 一、算术操作符&#xff08;&#xff09;1.除号 /2.取余 %二、移位操作符1.原码2.反码3.补码4.左移操作符5.右移操作符三、位操作符1.按位与操作符&#xff1a;&2.按位或操作符&#xff1a;|3.按位异或操作符&#xff1a;…...

编程日记 2023/7/31 11:10:16

Panda 编译时原子化 CSS-in-JS 框架的跨平台方案

Panda 编译时原子化 CSS-in-JS 框架的跨平台方案 Panda 编译时原子化 CSS-in-JS 框架的跨平台方案 对编译时原子化CSS框架的思考编译时 CSS-in-JS 方案对比 LinariaPandacss总结 weapp-pandacss 介绍快速开始 pandacss 安装和配置 0. 安装和初始化 pandacss1. 配置 postcss2. …...

编程日记 2023/7/31 11:09:15

【图论】BFS中的最短路模型

算法提高课笔记 目录 迷宫问题题意思路代码 武士风度的牛题意思路代码 抓住那头牛题意思路代码 BFS可以解决边权为1的最短路问题&#xff0c;下面是三道相关例题 迷宫问题 原题链接 给定一个 nn 的二维数组&#xff0c;如下所示&#xff1a; int maze[5][5] {0, 1, 0, 0, …...

编程日记 2023/7/31 11:08:15

Linux Mint 21.2 ISO 镜像开放下载

导读Linux Mint 21.2 ISO 镜像于 2023 年 6 月 21 日公测&#xff0c;开发者在这段时间内收集并修复了用户反馈的诸多问题。 代号为“Victoria”的 Linux Mint 21.2 ISO 镜像于今天正式开放下载&#xff0c;新版本基于 Ubuntu 22.04 LTS&#xff0c;提供 Cinnamon 5.8、Xfce 4.…...

编程日记 2023/7/31 11:07:14