vue页面中展示图片、文档、音频、视频，主要是src中赋值为base64或者url地址。所以，如何组装url，就是解决问题的关键。工作中常用的有三种方式：
1、全路径方式：
对于安全要求不严格的，可以采用这种方式。因为这种全路径一般会长期有效，仅仅通过src=url，不太好做鉴权。
可以通过nginx,apache，tomcat等服务器，配置出文件的url，后端返回给前端，前端放入url直接使用。也可以后端提供一个有参get请求接口，前端拼接出该接口的url，参数在url后，根据参数不同，后端接口返回不同数据。该种方式最简单，不再上代码。
2、base64方式；
后端返回给前端组装好的base64字符串，前端拿到后，放入src的值中，即可正常显示音频。base64字符串方式弊端是，比较大时，在app浏览器中，可能导致页面崩溃，卡死，无响应。
示例代码如下：
后端java代码：
@RequestMapping(value="getBase64Str",method = RequestMethod.GET)
public String getBase64Str(HttpServletRequest request, HttpServletResponse response) {
String filePath = "F:/data/upload/verifyCode/leaveStation.mp3";
BASE64Encoder encoder = new BASE64Encoder();
String fileStr =null;
try {
byte[] bFile = Files.readAllBytes(new File(filePath).toPath());
fileStr = "data:audio/mp3;base64," + encoder.encode(bFile);
} catch (IOException e) {
e.printStackTrace();
}
return fileStr;
}
前端vue代码：
发起请求部分代码
axios({
url:'http://localhost:8889/aa/getBase64Str',
headers: {'Content-Type': "application/json;charset=UTF-8",
"Authorization":"hello1"}
}).then(result=> {
// console.log(result.data)
this.srcUrl = result.data;
})
音频标签部分代码：
<audio :src="srcUrl" controls id="audio_demo" >
data部分：
data(){
return{
srcUrl:''
}
},
3、后端返回文件流，前端自己组装url。
后端返回流，前端获取到流，并转成成url，赋值给src，将音频文件展示出来。此种方式，是通过请求获取的流，前端自己组装url，故可以在请求中加入权限校验的参数，无需后端配置自动放行的白名单。并且前端组装的url，页面刷新后就失效，无法复制出来给其他地方用，安全性更好。代码示例如下：
java后端代码：
@RequestMapping(value="getStream",method = RequestMethod.GET)
public void getStream(HttpServletRequest request, HttpServletResponse response) {
try {
String downloadFile = "F:/data/upload/verifyCode/leaveStation.mp3";
FileInputStream is = new FileInputStream(downloadFile);
int i = is.available(); // 得到文件大小
byte data[] = new byte[i];
is.read(data); // 读数据
is.close();
response.setContentType("audio/mp3"); // 设置返回的文件类型
OutputStream toClient = response.getOutputStream(); // 得到向客户端输出二进制数据的对象
toClient.write(data); // 输出数据
toClient.close();
} catch (Exception e) {
e.printStackTrace();
}
}
前端vue代码:
axios请求部分：
axios({
url:'http://localhost:8889/official-web-back/cirrus/getStream',
responseType:'blob',
headers: {'Content-Type': "application/json;charset=UTF-8",
"Authorization":"hello1"}
}).then(result=>{
//console.log(result.data)
this.srcUrl = window.URL.createObjectURL(result.data);
})
h5比钱部分：
<audio :src="srcUrl" controls id="audio_demo" >
data部分：
data(){
return{
srcUrl:''
}
},