Question

我正在尝试将音频作为MultiPart文件上传到Spring Boot API。我从来没有在Angular2.x应用程序中做过任何类似的事情，所以根本不确定我的方法是否正确。我不断从api收到500错误，并认为可能是我的音频数据未以正确的格式发送...我在这里遗漏了什么吗？我查看了使用javaFX在该GUI中完成的相同API的gui代码，该音频被记录下来，另存为wav，然后发送到api端点。我应该先保存录音的.wav文件，然后将其读取/发送到API，还是可以像现在一样使用Blob？

我的代码：

the Kotlin/spring boot endpoint:@PostMapping("/vb/Verify")
    fun verify(@RequestParam("Audio") file:MultipartFile,
               @RequestParam(name = "SessionID") sessionId: String,
               @RequestParam(name = "Risk") risk: String,
               @RequestParam(name = "Strategy") strategy:String,
               @RequestParam(name = "AudioType") audioType:String,
               @RequestParam(name = "Channel") channel:String):VerifyResponseDTO {

        val audioBytes = StreamUtils.copyToByteArray(file.inputStream)
        return vbService.verify(sessionId, audioBytes, audioType, strategy, channel, Risk.byCode(risk))

    }


my angular component code:


constructor(private restService: RestService) {
    const onSuccess = stream => {
      this.mediaRecorder = new MediaRecorder(stream);
      this.mediaRecorder.onstop = e => {
        const audio = new Audio();
        const blob = new Blob(this.chunks, {type : 'audio/wav'});
        this.chunks.length = 0;
        audio.src = window.URL.createObjectURL(blob);                
        this.verify(blob);
        audio.load();
        audio.play();
      };

      this.mediaRecorder.ondataavailable = e => this.chunks.push(e.data);
    };

    navigator.getUserMedia = (navigator.getUserMedia ||
      navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia ||
      navigator.msGetUserMedia);

    navigator.getUserMedia({ audio: true }, onSuccess, e => console.log(e));
  }

verify(blob: Blob) {
    this.restService.startSession()
    .subscribe((res) => {
      console.log(res);
      this.restService.verify(blob)
      .subscribe((res) => {
        console.log(res);
      }, (err) => {
        console.log(err);
      });
    }, (err) => {
      console.log(err);
    });
  }



my Angular Service verify function:
verify(blob: Blob): Observable<any> {     
    let formData:FormData = new FormData();
    formData.append("SessionID", "neld02");
    formData.append("Strategy", "Phrase");
    formData.append("AudioType", "Header");
    formData.append("Risk", "Lo")
    formData.append("Channel", "Smart")
    formData.append('Audio', blob);   
    formData.append("Text", "");


    return this.hc.post(`${this.api}/Verify`, formData);
   }

Answer 1

引用@RequestParam（“ Audio”） file：MultipartFile ，

我遇到了类似的问题，您能否尝试将Blob映射到file（）对象？

  const file = new File([blob], 'audio.wav');
  const formData = new FormData();
  formData.append('File', file, file.name); // file.name was mandatory for us (otherwise again an error occured)

Answer 2

将@RequestPart用于文件，将另一个@RequestPart用于封装元数据音频属性：

@PostMapping("/vb/Verify")
fun verify(@RequestPart(value = "audio") file:MultipartFile,
           @RequestPart(value = "audioMetadata") properties: AudioMetadata,

在有角度的一侧使用相同的方法：

uploadFileCreateTable（payload）{

const formData = new FormData();
formData.append('audio', payload.file);

const audioMetadata = {
  sessionId: payload.sessionId,
  strategy: payload.strategy
  ... //and so on
};
formData.append('audioMetadata', new Blob([ JSON.stringify(audioMetadata) ], {
  type: 'application/json'
}));

return this.http.post(`${this.api}/Verify`, formData);
};

Answer 3

我建议您从客户端发送const galleryRoutes: Routes = [ { path: 'gallery', component: GalleryMainComponent, canActivate: [AuthGuard], children: [ {path: '', component: GalleryComponent,}, {path: 'add', component: GalleryAddComponent}, {path: ':id', component: GalleryItemComponent}, ] }, ];字符串作为音频blob（因此，可以使用任何base64将blob转换为base 64字符串），然后在后端可以处理base64字符串lik这个。

angular module

从Angular6客户端将Blob数据作为MultipartFile发送到Spring Boot API

3 个答案: