如何将 mp3 文件从 Java 后端发送到前端并在 Vue.js 前端播放文件答案

【问题标题】：How to send mp3 file from Java Backend to frontend and play the file in the Vue.js frontend如何将 mp3 文件从 Java 后端发送到前端并在 Vue.js 前端播放文件
【发布时间】：2021-01-25 06:40:02
【问题描述】：

我们在 Vue.js 中有一个 Spring Boot java 后端和一个前端。后端 API 代码调用外部 API 获取 MP3，Vue.js 前端调用后端 API 获取 mp3 文件并播放。现在有时浏览器会显示不稳定的行为，有时由于 CORS 问题而无法播放 mp3。

因此，我想在后端本身下载文件并将可能是字节返回到前端。我对前端非常陌生，想知道从后端下载 mp3 的最佳方式是什么，应该以哪种格式将 mp3 文件发送到前端，以及如何使用 javascript(vue) 将字节转换为 mp3。

请注意文件大小非常小。该文件是

【问题讨论】：

标签： javascript spring spring-boot vue.js

【解决方案1】：

从 Spring 你可以返回一个字节数组：

File f = new File("/path/to/the/file");
byte[] file = Files.readAllBytes(f.toPath());

HttpHeaders headers = new HttpHeaders();
headers.set("Content-Disposition", "attachment; filename=\"" + f.getName() +".wav\"");
ResponseEntity<byte[]> response = new ResponseEntity(file, headers, HttpStatus.OK);

return response;

然后像这样在javascript中获取它：

import fileDownload from 'js-file-download';

const { data } =  await axios.get(`http://api.url`, {
        responseType: 'arraybuffer',
        headers: { 'Accept': '*/*', 'Content-Type': 'audio/wav' }
    }).then(resp => resp);
    const blob = new Blob([data], {
        type: 'audio/wav'
    })
    const url = URL.createObjectURL(blob);

    fetch(url)
        .then(res => res.blob())
        .then(blob => fileDownload(blob, 'your_filename'))
        .catch(e => console.log('ERROR DOWNLOADING AUDIO FILE'));

我使用过 React 和 axios，但我希望你能使用 ;)

【讨论】：