代码之家 › 专栏 › 技术社区 › Foreever

将音频文件从角度资源发布到服务器

fileapi angular javascript

0

Foreever · 技术社区 · 7 年前

我无法创建如下正确的文件对象。它正在创建一个大小为0的文件对象。

const file = new File([''], '../../assets/' + filename);
const formData: FormData = new FormData();
formData.append('file', file, 'filename.wav');
this.http.post('http://localhost:5000/api', 
    formData ).subscribe(data => {
      console.log('success', data);
    }, error => {
      console.log(error);
    });

1 回复 | 直到 7 年前

1

0

Foreever 7 年前

最后,我首先从xhrequest的响应创建Blob,然后将其转换为文件对象。

发件人.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';


@Injectable()
export class SenderService {
  postUrl = 'http://localhost:5000/post_url';
  fetchAudioUrl = 'http://localhost:4200/assets/';

  constructor(private http: HttpClient) {}

  send (audioFile: File) {
    const formData: FormData = new FormData();
    formData.append('file', audioFile, audioFile.name);
    return this.http.post(this.postUrl, formData);
  }

  getAudio (fileName: string) {
    return this.http.get(this.fetchAudioUrl + fileName, { responseType: 'blob'});
  }
}

演示.component.ts

import { SenderService } from './sender.service';

@Component({
......
  providers: [SenderService]
})
export class DemoComponent {

constructor(private senderService: SenderService) {}

  buttonClicked(req: any): void {
    this.senderService.getAudio(req.fileName)
      .subscribe((data: any) => {
        const file = new File([data], req.fileName);
        this.senderService.send(file)
          .subscribe((data: any) => {
        console.log(data);
          }, error => {
            console.log(error);
          });
      });
  }