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

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

news 2026/5/22 1:38:19

前言

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

Spring Boot 项目标准化部署打包实战

Spring Boot 项目标准化部署打包实战 一、目标 将 Spring Boot 项目打包为开箱即用的生产环境部署包。用户解压后只需修改配置文件&#xff0c;运行启动脚本即可启动服务。 最终目录结构 your-app/ ├── bin/ │ ├── startup.sh # Linux 启动脚本 │ └── …...

编程新知 2026/5/22 1:22:00

2026年JAVA语言前端还可以学吗?是否还能找到好工作？

因为Java并不是前端语言。前端开发主要用的是 HTML、CSS、JavaScript/TypeScript&#xff0c;以及 React、Vue 等框架。可能您是混淆了 Java 和 JavaScript&#xff0c;或者想问的是“学 Java 还能找到好工作吗&#xff1f;前端还能学吗&#xff1f;” 下面我分开讲清楚&#x…...

编程新知 2026/5/22 1:13:18

8.C# —— 随机数、DateTime时间、字符串

一、C# 随机数&#xff08;伪随机 安全随机&#xff09;1. 核心概念计算机中没有真正的随机数&#xff0c;生成的都是伪随机数&#xff08;通过算法 种子计算得出&#xff09;。种子相同 → 生成的随机数序列完全相同不指定种子 → 默认使用系统当前时间作为种子&#xff0c;…...

编程新知 2026/5/22 0:22:19

基于Windows内核驱动框架的游戏控制器虚拟化技术实现方案

基于Windows内核驱动框架的游戏控制器虚拟化技术实现方案 【免费下载链接】ViGEmBus Windows kernel-mode driver emulating well-known USB game controllers. 项目地址: https://gitcode.com/gh_mirrors/vi/ViGEmBus 在Windows游戏生态系统中&#xff0c;设备兼容性一…...

编程新知 2026/5/22 0:14:04

fltk-rs常见问题解决方案：从编译错误到运行时问题的全面排查

fltk-rs常见问题解决方案&#xff1a;从编译错误到运行时问题的全面排查 【免费下载链接】fltk-rs Rust bindings for the FLTK GUI library. 项目地址: https://gitcode.com/gh_mirrors/fl/fltk-rs fltk-rs是Rust语言的FLTK GUI库绑定&#xff0c;为开发者提供了轻量级…...

编程新知 2026/5/21 23:08:37

claudecode用户如何通过taotoken解决封号与token不足的痛点

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 claudecode用户如何通过taotoken解决封号与token不足的痛点 1. 场景与核心挑战 对于深度使用 Claude Code 编程助手的开发者而言&…...

编程新知 2026/5/21 21:05:20

CANN Skills：用 AIGC 内容帮助开发者学习昇腾

CANN 开源社区的 skills 仓库是一个挺有意思的项目。它不是一个技术库&#xff0c;不提供任何 API 或算子——它是一个由 AI Agent 驱动的技术内容 Skill 合集。 每份 Skill 是一份 SKILL.md 文件&#xff0c;定义了 Agent 写特定主题技术文章的行为规则——术语规范、文章类型…...

编程新知 2026/5/21 19:46:28

2026 在线考试系统哪个好？功能、客户、方案、优势与服务全对比

前言数字化转型浪潮下&#xff0c;在线考试系统已从教育、企业的辅助工具&#xff0c;升级为覆盖教学考核、人才招聘、员工培训、政务考核、资格认证、知识竞赛的核心数字基础设施。据艾瑞咨询 2026 年 2 月发布的《中国线上考试行业发展白皮书》显示&#xff0c;2025 年中国线…...

编程新知 2026/5/21 19:15:19

SubAgent 进阶：LLM 策略、工具借用与 Skill 嵌套

标签&#xff1a;Java SubAgent LLM策略 llmFactory allowedTools Skill嵌套 j-langchain 前置阅读&#xff1a;SubAgent 基础&#xff1a;拥有自主工具的子代理 适合人群&#xff1a;已掌握 SubAgent 基础用法&#xff0c;希望灵活控制模型选择、工具权限与多层嵌套的 Java 开…...

编程新知 2026/5/21 19:13:18

软件测试的“测开分离”趋势，是机遇还是陷阱

一、测开分离&#xff1a;软件测试行业的新变局在软件测试行业的发展历程中&#xff0c;角色的边界一直在悄然演变。从早期手工测试独挑大梁&#xff0c;到自动化测试兴起后测试人员开始涉足简单代码编写&#xff0c;再到如今测试开发工程师岗位的独立&#xff0c;测试与开发的…...

编程新知 2026/5/21 19:01:48