dedecms网站建设合同,南宁seo怎么做优化团队,网站制作的付款方式,江西抚州建设网站img 标签预览图片如何携带token进行验证
前言 vue中给img的src添加token 因项目中安全测评的需要#xff0c;请求图片时要求添加token#xff0c;方法如下#xff1a;在项目中循环渲染的img标签中的图片要显示#xff0c;src需要加请求头token#xff08;正常情况下img 标签预览图片如何携带token进行验证
前言 vue中给img的src添加token 因项目中安全测评的需要请求图片时要求添加token方法如下在项目中循环渲染的img标签中的图片要显示src需要加请求头token正常情况下后端直接返回src的url
图片在前端开发中扮演了重要的角色它们不仅仅是美观的元素还可以传递信息和激发用户的兴趣。随着应用场景的增多前端开发人员就需要在图片加载过程中携带验证的信息。如 token用于身份验证、权限控制等方面。通过在图片的 URL 或请求头中携带 token 信息从而实现图片信息的安全传输。
实现思路
1、在img 请求图片时要求添加tokensrc 后 url?token‘’ 拼接 或通过设置在请求头里可以使用XMLHttpRequest2、间接通过一个后端api 下载文件到本地
尝试 第1方案
vue中给img的src添加token 自定义子组件AuthImg在这发送请求获取img地址
templatediv!-- 显示图片 --img refimg :style{width:width,height:height} v-ifimgType view /!-- 使用element-ui的el-image进行图片预览 --el-image :style{width:width,height:height} refpreviewimg v-ifimgType preView :srcpreviewpath:preview-src-listpreviewList/el-image/div
/templatescriptimport {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的srcgetImgSrcByToken() {// 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 :imgSrcbaseurl /download.do?id files.name height60 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、类型、宽度和高度。
封装文件
templatediv!-- 显示图片 --img refimg :style{width:width,height:height} v-ifimgType view /!-- 使用element-ui的el-image进行图片预览 --el-image :style{width:width,height:height} refpreviewimg v-ifimgType preView :srcpreviewpath:preview-src-listpreviewList/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-previewimgUrl,method: get,responseType: blob,});
}main.js
// 将其注册为全局组件
import TokenImg from /components/tokenImg;
Vue.component(TokenImg, TokenImg)使用文件
TokenImg :width50px :height50px :imgUrlYourUrl :imgTypepreView/实现效果 渲染查看 拓展
下载文件携带 token 第一种方式手写实现
//下载方法
getBgdzByGcsj(row) {// 通过接口下载文件downloadFileApiDown(row.bgdz).then((res) {// 将文件流转换为下载链接const downloadUrl URL.createObjectURL(res);// 创建一个a标签const link document.createElement(a);// 设置链接的URL为下载链接link.href downloadUrl;// 设置下载的文件名为报表管理.xlslink.download 报表管理.xls;// 隐藏a标签link.style.display none;// 将a标签添加到页面的body中document.body.appendChild(link);// 触发a标签的点击事件开始下载link.click();// 下载完成后删除a标签document.body.removeChild(link);});
}
