Angular 10 POST请求Directus Wav文件上传

问题描述

我正在尝试将文件上传到Directus（无头CMS）。 在这里您将看到API描述：https://docs.directus.io/api/files.html#create-a-file

我正在使用Angular 10。

该文件是我从Angular Frontend获得的文件。在控制台中看起来像这样： 文件{名称：“ CantinaBand3.wav”，lastModified：1603486540829，lastModifiedDate：2020年10月23日星期五格林尼治标准时间+0200（MitteleuropäischeSommerzeit），webkitRelativePath：“”，大小：132344，…。

uploadExampleTest(file) {
    const formData = new FormData();
    formData.append('file',file);
    var token = localStorage.getItem("token");
    const req = new HttpRequest('POST',this.url+"?access_token="+token,formData,{
      headers: new HttpHeaders({'Content-Type':'multipart/form-data'}),reportProgress: true
    });
    return this.httpClient.request(req);
  }

由此我得到：消息：“数据：此值不应为空。filename_disk：此值不应为空。filename_download：此值不应为空。”

 public uploadDirectus(file) {
    var token = localStorage.getItem("token");
    var uuid = this.generateUUID(); //this makes just an uuid
    let postData = {
      "data": file,"filename_disk": uuid+".wav","filename_download":  uuid+".wav"
    }
    var authorizationHeader = new HttpHeaders({
      'Accept': 'application/json','Content-Type': 'multipart/form-data','Authorization': 'Bearer ' + token
  });
    return this.httpClient.post(this.url,file,{  
        reportProgress: true,observe: 'events',headers: authorizationHeader
      });  
  }

有了这个，我得到了同样的错误。

createFile(fileBase64,extension="png") {

    var token = localStorage.getItem("token");
    var authorizationHeader = this.authService.getAuthorizationHeaderbrowser(token);
    var uuid = this.generateUUID();
    let postData = {
      "data": fileBase64,"filename_disk": uuid+"."+extension,"filename_download":  uuid+"."+extension
    }
    return this.httpClient.post(this.url,postData,{ headers: authorizationHeader,reportProgress: true,observe: 'events' });
  }

最后一个得到：data：此值不应为空。如果我将其更改为Content-Type'：'multipart / form-data'，则会收到与执行前两个版本时相同的错误。

这就是我的称呼方式：

uploadFile(file) {
    const formData = new FormData();
    formData.append('data',file.data);
    formData.append('filename_disk',"ente.wav");
    formData.append('filename_download',"ente.wav");
    file.inProgress = true;
    console.log(formData);
    
    this.fileService.createFile(file.data,"wav").pipe(
      map(event => {
        switch (event.type) {
          case HttpEventType.UploadProgress:
            file.progress = Math.round(event.loaded * 100 / event.total);
            break;
          case HttpEventType.Response:
            return event;
        }
      }),catchError((error: HttpErrorResponse) => {
        console.log(error);
        file.inProgress = false;
        return of(`${file.data.name} upload Failed.`);
      })).subscribe((event: any) => {
        if (typeof (event) === 'object') {
          console.log(event.body);
          this.link = event.body.link;
          console.log(event.body.link);
        }
      },error=>console.log(error));
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）