关于springboot和vue上传歌曲和获取歌曲的一种方式记录

最近在尝试做个音乐播放器，以前后端分离的方式实现，主要的技术栈是springboot + vue + mysql

音频数据在数据库中的存储方式是blob，关于什么事blob数据，大家可以参考这篇文章JS中Blob数据的介绍

 /**
     * 上传音乐文件
     * @param musicData 前端发送的 MultipartFile 类型的文件数据
     * @param fileName  文件名
     * @return
     */
    @PostMapping(value = "/uploadMusic", consumes = "multipart/form-data")
    public Result uploadMusic(
            @RequestParam(value = "musicData") MultipartFile musicData,
            @RequestParam(value = "fileName") String fileName,
            @RequestParam(value = "singer") String singer
            ){
        boolean flag = false;

        if(!musicData.isEmpty()){
            flag = service.uploadMusic(musicData, fileName, singer);
        }
        return flag ? Result.success(true) : Result.fail("操作失败！");
    }

/**
     * 上传音乐文件到数据库
     * @param musicData 音乐数据
     * @param fileName  文件名
     * @return  上传结果
     */
    @Override
    public boolean uploadMusic(MultipartFile musicData, String fileName, String singer) {
        try {
            Song song = new Song();
            //        获取文件类型名称
            String fileType = musicData.getOriginalFilename().split("\\.")[1];
            byte [] data = musicData.getBytes();
            String fileNameWithType = fileName + '.' + fileType;

            song.setFileName(fileNameWithType);
            song.setSinger(singer);
            song.setFileData(data);
            String format = LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"));
            song.setUploadTime(format);

            int insert = songMapper.insert(song);
            if (insert != 1){
                return false;
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        return true;
    }

 在vue中获取字节数据并将数据类型转换成blob类型，转换成浏览器audio标签可播放的方式

 responseType: 'blob',
        timeout: 120000
      })
        .then(res => {
          if (res.status === 200) {
            try {
              // 获取到后台返回的结果 res.data 这还是压缩了的
              const musicData = res.data
              // 将byte数组转换成Blob对象 并从响应中获取数据类型
              const blob = new Blob([musicData], { type: res.data.type })
              //  将Blob对象转换成URL对象
              const url = URL.createObjectURL(blob)
              //  将url返回
              this.audioURL = url
            } catch (err) {
              console.log('解压或数据出问题了！')
              console.log(err)
            }
          }