前端进行图片数据的预览请求原理

前端进行图片数据的预览请求代码：

let imgsrc = ‘/BGTOFlowSignV3?ajax=true&act=previewImg&doc_id=’ + item.doc_id + ‘&doc_ord=’ + item.ord;

代码原理：

这段代码是利用浏览器的默认行为，对指定路径发起 HTTP GET 请求，路径为相对路径 '/BGTOFlowSignV3?ajax=true&act=previewImg&docid=' + item.docid + '&doc_ord=' + item.ord。

在浏览器中，对于相对路径访问，浏览器会根据当前页面地址进行解析，生成一个完整的请求地址，并向该地址发送 HTTP 请求。在这段代码中，未指定协议和域名部分，因此浏览器会自动根据当前页面的协议和域名部分来生成完整的请求地址。

例如，如果当前页面地址为 https://example.com/path/to/page，那么访问 '/BGTOFlowSignV3?ajax=true&act=previewImg&docid=' + item.docid + '&docord=' + item.ord 这个相对路径时，浏览器会自动将其转换为完整的请求地址 https://example.com/BGTOFlowSignV3?ajax=true&act=previewImg&docid={item.docid}&docord={item.ord}。

在请求发起之后，服务器会接收到该请求，并根据请求参数进行处理，然后返回相应的内容给客户端，即该请求所代表的图片数据。最后，客户端将该响应内容渲染到页面中相应的图片元素上，完成了一次 HTTP 图片资源的请求和加载。

使用XMLHttpRequest实现：

这个请求也可以使用XMLHttpRequest对象进行发送。XMLHttpRequest是浏览器提供的用于发送 HTTP 请求的 API，可以通过创建XMLHttpRequest对象并调用其方法来实现 HTTP 请求。

下面是使用XMLHttpRequest对象发送 HTTP 请求的代码示例：

const xhr = new XMLHttpRequest();
const url = '/BGTOFlowSignV3?ajax=true&act=previewImg&doc_id=' + item.doc_id + '&doc_ord=' + item.ord;
xhr.open('GET', url, true); // true 表示为异步请求
xhr.responseType = 'blob';
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    // 请求成功，获取响应内容
    const blob = xhr.response;
    const url = window.URL.createObjectURL(blob);
    // 在img元素中显示图片
    img.src = url;
  } else {
    // 请求失败或者还没完成
  }
};
xhr.send();

这段代码发送一个 HTTP GET 请求，对应的 URL 为 '/BGTOFlowSignV3?ajax=true&act=previewImg&doc_id=' + item.doc_id + '&doc_ord=' + item.ord。请求成功后，获取服务器返回的二进制数据，使用 window.URL.createObjectURL创建一个下载链接用于在 img 元素中显示图片。

使用axios实现：

axios({
  method: 'get',
  url: '/BGTOFlowSignV3',
  responseType: 'blob',
  params: {
    ajax: true,
    act: 'previewImg',
    doc_id: item.doc_id,
    doc_ord: item.ord,
  },
}).then(response => {
  const blob = new Blob([response.data], { type: response.headers['content-type'] });
  const url = window.URL.createObjectURL(blob);
  img.src = url;
}).catch(error => {
  console.error(error);
});

这段代码使用了 axios 库的 API 来发送 HTTP GET 请求。在请求中，我们指定了 responseType: 'blob'，表示希望获取服务器返回的二进制数据；指定了 params 参数来携带请求参数。
在 axios 的返回结果中，我们可以通过 response.data 获取服务器返回的二进制数据的内容，response.headers['content-type'] 获取相应的 MIME 类型。通过这些内容，我们可以构造一个 Blob 对象，用于在浏览器中显示文件内容。具体做法是使用 window.URL.createObjectURL方法创建一个 URL 对象，然后将该对象的 URL 赋给 img 元素的 src 属性，该元素会自动根据内容类型渲染相应的内容。