Explore cómo las imágenes frontales llevan tokens para la verificación

prefacio

Las imágenes juegan un papel importante en el desarrollo de front-end, no son solo elementos estéticos, sino que también transmiten información y estimulan el interés del usuario. Con el aumento de escenarios de aplicaciones, los desarrolladores front-end deben llevar información de verificación durante el proceso de carga de imágenes. Como token , utilizado para verificación de identidad, control de permisos, etc. La transmisión segura de la información de la imagen se logra llevando la información del token en la URL de la imagen o en el encabezado de la solicitud .

---

Ideas de implementación

1. Cree un tokenImgcomponente llamado que se use para mostrar imágenes y admita la función de vista previa;
2. En la plantilla del componente, use <img>la etiqueta para mostrar la imagen o use element-uila <el-image>etiqueta para obtener una vista previa de la imagen;
3. En las propiedades del componente, reciba la URLdirección de la imagen ( imgUrl), el tipo de imagen ( imgType), el ancho de la imagen ( width) y la altura ( height);
4. En los datos del componente, defina la lista de imágenes de vista previa ( previewList) y la ruta de la imagen de vista previa ( previewpath);
5. Implemente dos métodos viewModel()y preViewModel()para obtener una vista previa de imágenes solamente y obtener una vista previa con miniaturas, respectivamente;
6. En el método, asigne la imagen al atributo de la etiqueta viewModel()llamando al archivo descargado API (downloadFileApi)y creando un objeto basado en el contenido del archivo devuelto ;URLURL<img>src
7. En preViewModel()el método, llame también al archivo descargado API, cree URLun objeto con el contenido del archivo devuelto y URLagréguelo a la lista de imágenes de vista previa;
8. Úselo para watchmonitorear el cambio de la propiedad y llame al método correspondiente imgUrlde acuerdo con el valor de la propiedad cuando cambie ;imgType
9. En el gancho del componente , llame al método correspondiente mounted()según el valor de la propiedad inicial ;imgType
10. Registre el componente como un componente global en main.jsel archivo tokenImgpara usarlo en otro lugar;
11. Cuando necesite usar este componente, use <TokenImg>la etiqueta y pase los atributos correspondientes (como imagen URL, tipo de imagen, ancho y alto); de esta manera, puede usar el componente
    en la interfaz para mostrar imágenes y admitir la vista previa función. Asegúrese de pasar la imagen , el tipo, el ancho y la altura correctos cuando use el componente .tokenImgTokenURL

---

archivo de paquete

<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>

---

archivo de interfaz importado

export function downloadFileApi(imgUrl) {
    
    
  return request({
    
    
    url: "/api/file/examine-preview"+imgUrl,
    method: "get",
    responseType: "blob",
  });
}

principal.js

// 将其注册为全局组件
import TokenImg from "@/components/tokenImg";
Vue.component('TokenImg', TokenImg)

---

usar archivo

<TokenImg :width="`50px`" :height="`50px`" :imgUrl="YourUrl" :imgType="`preView`"/>

---

lograr efecto

hacer una solicitud

renderizar vista

---

expandir

1. Implemente esta operación en el applet de WeChat

Archivo de paquete ----.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列表
      });
    },
  }
});

Archivo de paquete ----.wxml

<view>
   <!-- 使用小程序的image组件进行图片预览 -->
   <image bindtap="previewImageOn" data-previewPath="{
     
     {previewPath}}" src="{
     
     {previewPath}}" mode="aspectFill" 
   style="width:{ 
        { 
        imageWidth}};height:{ 
        { 
        imageHeight}};" />
</view>

app.jsonimportación mundial

"usingComponents": {
    
    
  "token-img": "./components/tokenImg/tokenImg"
},

page.jsonimportación mundial

{
    
    
    "usingComponents": {
    
    
        "token-img": "./components/tokenImg/tokenImg"
    }
}

usar archivo

<view>
    <token-img imageWidth="100%" imageHeight="180rpx" imgUrl="{
     
     {YourUrl}}"></token-img>
</view>

lograr efecto

---

2. Descarga el archivo con el token

La primera forma: implementación manuscrita

//下载方法
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);
  });
}

La segunda forma: usando el plugin( file-saver)

file-saver es una JavaScriptbiblioteca para guardar archivos en el navegador. Proporciona una manera fácil de generar y guardar archivos sin la participación del servidor. Con file-saverel complemento, puede generar y descargar archivos fácilmente en la interfaz sin enviar solicitudes de archivos al servidor y devolver enlaces de archivos, lo que simplifica enormemente el proceso de descarga de archivos.

file-saverLa función principal del complemento es Blobguardar el enlace de descarga del archivo generado por el objeto en la ruta de descarga del navegador. Proporciona los siguientes métodos:

1. saveAsMétodo

Guarde el archivo localmente. Puede usar saveAsel método para especificar el contenido y el nombre del archivo y luego guardarlo en la ruta de descarga del navegador.

2. saveMétodo

Guarde el archivo localmente, saveAsde forma similar al método, pero el cuadro de diálogo para guardar el archivo no aparecerá.

3. createObjectURLMétodo

Crear Blobobjeto URL. Con createObjectURLel método, puede Blobconvertir el objeto para que esté disponible para su descarga URL.

4. revokeObjectURLMétodo

Creado antes del lanzamiento URL. Una vez que se completa la descarga del archivo, puede usar revokeObjectURLel método para liberar el creado URLpara liberar los recursos del navegador.

• Instalar

  npm install file-saver
  

• introducir

  import {
        
         saveAs } from 'file-saver';
  

• usar

  // res 返回地址
  saveAs(res, '报表管理.xls');