如何使用 Axios 使用 html img/video 标签显示图像或视频？

Question

我正在使用 axios 和 asp.net core 3.1 为后端 api 开发一个反应应用程序（打字稿模板）。而且，例如，我有这个受保护的（使用 JWT 的身份）端点来从服务器获取图像文件为FileStream：

[Authorize(Policy = AspianCorePolicy.AdminAttachmentGetImagePolicy)]
[HttpGet("images/{filename}")]
public async Task<ActionResult> GetImage(string filename)
{
     var imageDto = await Mediator.Send(new GetImage.Query { FileName = filename });
     return File(imageDto.Memory, imageDto.MimeType, imageDto.FileName);
}

考虑到这一点，我还有一些大型视频文件要流式传输。

• 话虽如此，如果我想使用 Axios 将其作为文件流获取并显示在img 或video 标签甚至下载文件，如何通过axios和html标签做到这一点？我应该使用 Axios responseType: 'stream' 吗？如果是这样，我该怎么做？

Answer 1

axios api 是直截了当的。你可以在这里找到axios browser examples。

显示图像或视频会非常相似。

设置调用以从 Web api 检索 blob 响应。

var config = { responseType: 'blob' }

然后进行调用并从 blob 创建一个数据 url。然后可以在目标元素上设置数据 url：

图片

axios.get("api/media?fileName=TestImage.png", config)
    .then(resp => {
        $("#img1").attr("src", window.URL.createObjectURL(resp.data));
    });

视频

axios.get("api/media?fileName=TestVideo.mp4", config)
    .then(resp => {
        $("#video1").attr("src", window.URL.createObjectURL(resp.data));
    });

下载将归档一个类似的过程，除了您在下载属性设置为 true 的 html 锚元素上设置 href。这可以通过编程方式在创建后单击链接（受此gist 启发）

图片

axios.get("api/media?fileName=TestImage.png", config)
    .then(resp => {
        download(resp);
    });

视频

axios.get("api/media?fileName=TestVideo.mp4", config)
    .then(resp => {
        download(resp);
    });

还有下载功能

function download(resp) {
    var url = urlCreator.createObjectURL(resp.data);
    var fileName = resp.headers["content-disposition"].split("filename=")[1].split(";")[0];
    var link = document.createElement('a');
    $(link).attr("href", url).attr("download", fileName);
    link.click();
    window.URL.revokeObjectURL(url);
}

就responseType: 'stream' 而言，我无法让它在浏览器中运行。根据 Axios Github，streaming is currently not supported in browsers 由于使用了 XHR 请求。

将所有这些放在一起，在您指定的路线上使用一个有效的 Web api 端点，这将是有效的代码示例。

$(document).ready(() => bindHandlers());
var urlCreator;

function bindHandlers() {
  urlCreator = window.URL || window.webkitURL;

  $("#btnShowImage").click(() => btnShowImageClick());
  $("#btnShowVideo").click(() => btnShowVideoClick());
  $("#btnDownloadImage").click(() => btnDownloadImageClick());
  $("#btnDownloadVideo").click(() => btnDownloadVideoClick());
  $("img1").hide();
  $('#videoWrapper').hide();
}
var config = {
  responseType: 'blob'
}

function btnShowImageClick() {
  axios.get("api/media?fileName=TestImage.png", config)
    .then(resp => {
      $("#img1").attr("src", urlCreator.createObjectURL(resp.data));
      $("#img1").show();
      $('#videoWrapper').hide();
    });
}

function btnShowVideoClick() {
  axios.get("api/media?fileName=TestVideo.mp4", config)
    .then(resp => {
      $("#img1").hide();
      $("#video1").attr("src", urlCreator.createObjectURL(resp.data))
      $('#videoWrapper').show();
    });
}

function btnDownloadImageClick() {
  axios.get("api/media?fileName=TestImage.png", config)
    .then(resp => {
      download(resp);
    });
}

function btnDownloadVideoClick() {
  axios.get("api/media?fileName=TestVideo.wmv", config)
    .then(resp => {
      download(resp);
    });
}

function download(resp) {
  var url = urlCreator.createObjectURL(resp.data);
  var fileName = resp.headers["content-disposition"]
    .split("filename=")[1].split(";")[0];
  var link = document.createElement('a');
  $(link).attr("href", url).attr("download", fileName);
  link.click();
  window.URL.revokeObjectURL(url);
}

<script src="https://cdn.jsdelivr.net/npm/axios@0.21.0/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-center">
  <h1 class="display-4">Axios Example</h1>
  <input id="btnShowImage" value="Show Image" type="button" />
  <input id="btnShowVideo" value="Show Video" type="button" />
  <input id="btnDownloadImage" value="Download Image" type="button" />
  <input id="btnDownloadVideo" value="Download Video" type="button" />
  <img id="img1" />
  <div id="videoWrapper">
    <video id="video1" controls="controls"></video>
  </div>
</div>