前端通过OSS地址下载文件

文艺小城青年

已于 2023-06-21 16:36:57 修改

阅读量3.3k

点赞数 6

CC 4.0 BY-SA版权

文章标签：前端 javascript 阿里云 vue

于 2023-06-21 16:33:00 首次发布

本文链接：https://blog.youkuaiyun.com/qq_59728477/article/details/131330463

文章介绍了在开发中遇到通过文件流下载录音文件的问题，转而采用fetch结合阿里OSS文件地址来实现下载。通过fetch获取Response对象，然后转换为blob，创建下载链接并触发下载。同时，提到了fetchAPI的基础用法和在网络请求中的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发中发现通过文件流下载录音文件会有问题，一直没有找到什么原因，索性换别的方法实现，这个方式是通过后端返回的阿里OSS文件地址使用fetch转成文件流的格式来下载，话不多说，上代码：

// row.fileAdd  文件地址   row.fileName  文件名称，需要加上文件后缀
fetch(row.fileAdd)
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', row.fileName+'.mp3');
    document.body.appendChild(link);
    link.click();
  })
  .catch(console.error);

忘记介绍Fetch Api了

Fetch 是用于在 JavaScript 中进行网络请求的 API，旨在提供更简单、更灵活的方式来处理 HTTP 请求和响应。Fetch API 基于 Promise 设计，可以在浏览器端和 Node.js 环境下使用。

fetch 函数接受一个 URL 字符串作为参数，并返回一个 Promise 对象。在 Promise 实例被解决后，会返回一个代表响应的 Response 对象，它包含了 HTTP 响应的多种信息，比如状态码、头部、响应体等。

以下是一个简单的使用 fetch 函数获取 JSON 数据的示例：

fetch('https://example.com/data.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在这个示例中，fetch 函数获取了位于 https://example.com/data.json 的 JSON 数据，并通过 response.json() 将 Response 对象转换为 JavaScript 对象（如果响应不是 JSON 格式，可以使用其他方法进行转换）。然后将获取到的数据输出到控制台上。

fetch 函数还提供了其他参数选项，比如 method、headers、body 等，可以根据具体需求进行配置。此外，fetch 函数默认情况下不会携带 cookies 和其他认证信息，需要手动设置 credentials 选项来控制是否携带这些信息。

需要注意的是，fetch 函数并不是万能的，这是因为一些历史原因仍然需要使用 XMLHTTPRequest 和 Ajax 进行网络请求。另外，fetch 函数在处理跨域请求时也有一些限制，需要进行 CORS 配置才能正常使用。