javascript—如何将mp3文件从java后端发送到前端,并在vue.js前端中播放该文件

axzmvihb  于 2021-07-24  发布在  Java
关注(0)|答案(1)|浏览(562)

我们有一个SpringBootJava后端和一个vue.js前端。后端api代码调用外部api获取mp3,vue.js前端调用后端api获取mp3文件并播放相同的文件。现在浏览器有时表现出不稳定的行为,有时因为cors问题而不能播放mp3。
因此,我想下载文件在后端本身和返回可能是字节到前端。我对前端非常陌生,想知道从后端下载mp3的最佳方式是什么,mp3文件应该以何种格式发送到前端,以及如何使用javascript(vue)将字节转换为mp3。
请注意文件大小非常小。文件是<5秒的mp3文件,所以我不想将文件存储在服务器中。

chy5wohz

chy5wohz1#

从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'jj
        .catch(e => console.log('ERROR DOWNLOADING AUDIO FILE'));

我用过react和axios,但我希望你能

相关问题