Vue页面中展示图片、文档、音频、视频的三种方式

    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;
})

  音频标签部分代码：

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比钱部分：

data部分：

data(){
    return{
        srcUrl:''
    }
},