前言
图片在前端开发中扮演了重要的角色，它们不仅仅是美观的元素，还可以传递信息和激发用户的兴趣。随着应用场景的增多，前端开发人员就需要在图片加载过程中携带验证的信息。如 token，用于身份验证、权限控制等方面。通过在图片的 URL 或请求头中携带 token 信息，从而实现图片信息的安全传输。
实现思路
- 创建一个名为
tokenImg的组件，该组件用于显示图片并支持预览功能； - 在组件的模板中，使用
<img>标签来显示图片，或使用element-ui的<el-image>标签进行图片预览； - 在组件的属性中，接收图片的
URL地址 (imgUrl)、图片类型 (imgType)、图片的宽度 (width) 和高度 (height)； - 在组件的数据中，定义预览图片列表 (
previewList) 和预览图片路径 (previewpath)； - 实现两个方法
viewModel()和preViewModel()分别用于仅预览图片和带缩略图预览； - 在
viewModel()方法中，通过调用下载文件的API (downloadFileApi)并根据返回的文件内容创建URL对象，将图片URL赋值给<img>标签的src属性； - 在
preViewModel()方法中，同样调用下载文件的API，将返回的文件内容创建URL对象，并将URL添加到预览图片列表中； - 使用
watch监听imgUrl属性的变化，在变化时根据imgType属性的值来调用对应的方法； - 在组件的
mounted()钩子中，根据初始的imgType属性值来调用对应的方法； - 在
main.js文件中将tokenImg组件注册为全局组件，以便在其他地方使用； - 在需要使用该组件的地方，使用
<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`"/>
实现效果
发起请求
渲染查看
拓展
一、微信小程序中实现该操作
封装文件 ----
.js
// 引入服务器请求封装的模块
const server = require('../../utils/server.js');
Component({
// 组件的内部数据
data: {
previewPath: "", // 预览图片路径
},
// 组件的对外属性，是属性名到属性设置的映射表
properties: {
imgUrl: {
// 图片的URL地址
type: String,
},
imageWidth: {
// 图片的宽度
type: String,
},
imageHeight: {
// 图片的高度
type: String,
},
},
// 组件的生命周期函数
lifetimes: {
attached() {
// 组件实例进入页面节点树时执行
this.fetchData(); // 调用数据处理方法
},
},
// 组件的方法，包括事件响应函数和任意的自定义方法
methods: {
// 发起请求获取图片数据
fetchData() {
const {
imgUrl } = this.properties; // 解构获取图片URL
const url = `http://192.168.0.11:8888/api/api-file/file/downloadFile/file-fld/${
imgUrl}`; // 拼接请求URL
server.request({
url, // 请求图片的URL
responseType: 'arraybuffer', // 响应类型为数组缓冲区
success: (res) => {
// 请求成功的回调函数
const base64 = wx.arrayBufferToBase64(res.data); // 将数组缓冲区转换为base64编码
const imageUrl = `data:image/png;base64,${
base64}`; // 拼接base64编码的图片URL
this.setData({
// 更新组件的数据
previewPath: imageUrl
});
}
});
},
// 点击预览图片
previewImageOn(e) {
const {
previewpath } = e.target.dataset; // 解构获取预览图片URL
wx.previewImage({
// 调用微信预览图片的API
urls: [previewpath], // 需要预览的图片URL列表
});
},
}
});
封装文件 ----
.wxml
<view>
<!-- 使用小程序的image组件进行图片预览 -->
<image bindtap="previewImageOn" data-previewPath="{
{previewPath}}" src="{
{previewPath}}" mode="aspectFill"
style="width:{
{
imageWidth}};height:{
{
imageHeight}};" />
</view>
app.json全局引入
"usingComponents": {
"token-img": "./components/tokenImg/tokenImg"
},
page.json全局引入
{
"usingComponents": {
"token-img": "./components/tokenImg/tokenImg"
}
}
使用文件
<view>
<token-img imageWidth="100%" imageHeight="180rpx" imgUrl="{
{YourUrl}}"></token-img>
</view>
实现效果
二、下载文件携带 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');