图片预加载需要token认证的地址处理-Toy模板网

这篇具有很好参考价值的文章主要介绍了图片预加载需要token认证的地址处理。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.添加函数修改img的属性；

/**
 * 
 * @param {*} idName 传入的id，获取改img的dom，添加相应的数学
 */
export const proxyImg = (idName) => {
  const img = document.getElementById(idName || 'img');
  const url = img.getAttribute('authsrc');
  const request = new XMLHttpRequest();
  request.responseType = 'blob';
  request.open('get', url, true);
  request.setRequestHeader('x-access-token', localStorage.getItem('x-access-token')); // 换成自己的token
  request.onreadystatechange = e => {
    if (request.readyState == XMLHttpRequest.DONE && request.status == 200) {
      img.src = URL.createObjectURL(request.response);
      img.onload = () => {
        URL.revokeObjectURL(img.src);
      }
    }
  };
  request.send(null);
}

2.处理图片，这里已图片list进行处理为例；

const { proxyImg } = require('@/utils/utils');
import { isEmpty } from 'lodash';

/**
   * 
   * @param {*} imgList 传入的img 是数组 [{fileId: 3318310, fileName: '一张图片', fileSize: "982.00KB" , fileUrl: "/staticResource/images/一张图片.jpg", ...},{}]
   * @param {*} field 传入的id，作用是获取img的dom
   */
  const dealImgData = (imgList: any[], field: String) => {
    if (!isEmpty(imgList)) { // 判断imgList是否为空
      imgList.forEach((el, index) => {
        // 为什么又判断，就是解决不显示的问题， field都要传......
        if(field) {
          proxyImg(`img${field}${index}`)
        }
      });
    }
  }

3.调用函数;

  dealImgData('传入的img的数组', '传入id，随便传，在当前页面是唯一值就OK了’);
  备注：可以在componentDidUpdate中调用，也可以在useEffect中调用

备注:

一般加载图片会用到img标签,添加src属性，如下所示：

<img src="imgUrl" />

但是因为需要在get请求头中加入token信息，不能直接将后台返回的图片url直接添加到src 后端返回二进制流，我们需要将二进制流以图片的形式显示在页面中

看到二进制，可以将responseType 设置为 blob

URL.createObjectURL()

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

URL.revokeObjectURL()

URL.revokeObjectURL() 静态方法用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。文章来源地址https://www.toymoban.com/news/detail-591374.html