前端通过OSS地址下载文件

在开发中发现通过文件流下载录音文件会有问题,一直没有找到什么原因,索性换别的方法实现,这个方式是通过后端返回的阿里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 配置才能正常使用。

你可能感兴趣的:(前端,javascript,阿里云,vue)