<img 标签预览图片如何携带token进行验证
前言 vue中给img的src添加token
因项目中安全测评的需要，请求图片时要求添加token，方法如下：
在项目中循环渲染的img标签中的图片要显示，src需要加请求头token（正常情况下，后端直接返回src的url）
图片在前端开发中扮演了重要的角色，它们不仅仅是美观的元素，还可以传递信息和激发用户的兴趣。随着应用场景的增多，前端开发人员就需要在图片加载过程中携带验证的信息。如 token，用于身份验证、权限控制等方面。通过在图片的 URL 或请求头中携带 token 信息，从而实现图片信息的安全传输。
实现思路
- 1、在img 请求图片时要求添加token：src 后 url?token=‘’ 拼接， 或通过设置在请求头里，可以使用XMLHttpRequest
- 2、间接通过一个后端api 下载文件到本地
尝试 第1方案
vue中给img的src添加token
- 自定义子组件AuthImg，在这发送请求，获取img地址
<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 {getToken} from "@/utils/auth";
export default {
name: 'AuthImg',
props: {
imgSrc: String,
// 图片类型，可选为'view'（仅预览图片）或'preView'（可点击预览）
imgType: {
type: String,
default: "view",
},
// 图片的宽度
width: {
type: String,
},
// 图片的高度
height: {
type: String,
},
},
data() {
return {
// 预览图片列表
previewList: [],
// 预览图片路径
previewpath: "",
};
},
computed: {
// 拿到token值，登录成功后由后台返回的
token() {
// 这里我把登录之后拿到的token放到了vuex中
return getToken();
}
},
mounted() {
},
methods: {
// 携带token请求img的src
getImgSrcByToken() {
// Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象
Object.defineProperty(Image.prototype, 'imgSrc', {
// 可写
writable: true,
// 可枚举
enumerable: true,
// 若configurable设为false，那就不可以delete了
configurable: true
});
let img = this.$refs.img;
let request = new XMLHttpRequest();
request.responseType = 'blob';
request.open('get', this.imgSrc, true);
request.setRequestHeader('Authorization', 'Bearer ' + this.token);
request.onreadystatechange(e => {
if(request.readyState == XMLHttpRequest.DONE && request.status == 200) {
// URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象URL，这个新的URL对象表示指定的File对象或blob对象
img.src = URL.createObjectURL(request.response);
img.onload = () => {
// 在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。
URL.revokeObjectURL(img.src);
}
}
});
request.send(null);
},
},
}
</script>
- 父组件中调用
<authImg :imgSrc="baseurl + '/download.do?id='+ files.name + '&height=60'" alt=""></authImg>
下面尝试 第2方法：
- 创建一个名为 tokenImg 的组件，该组件用于显示图片并支持预览功能；
- 在组件的模板中，使用 标签来显示图片，或使用 element-ui 的 标签进行图片预览；
- 在组件的属性中，接收图片的 URL 地址 (imgUrl)、图片类型 (imgType)、图片的宽度 (width) 和高度 (height)；
- 在组件的数据中，定义预览图片列表 (previewList) 和预览图片路径 (previewpath)
- 实现两个方法 viewModel() 和 preViewModel() 分别用于仅预览图片和带缩略图预览；
- 在 viewModel() 方法中，通过调用下载文件的 API (downloadFileApi) 并根据返回的文件内容创建 URL 对象，将图片 URL 赋值给 标签的 src 属性；
- 在 preViewModel() 方法中，同样调用下载文件的 API，将返回的文件内容创建 URL 对象，并将 URL 添加到预览图片列表中；
- 使用 watch 监听 imgUrl 属性的变化，在变化时根据 imgType 属性的值来调用对应的方法；
- 在组件的 mounted() 钩子中，根据初始的 imgType 属性值来调用对应的方法；
- 在 main.js 文件中将 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);
});
}
![[Python] opencv - 什么是直方图？如何绘制图像的直方图？如何对直方图进行均匀化处理？](https://img-blog.csdnimg.cn/direct/522a2286cfbb4a6c9042e6c9e2c15a6c.png)
