將文件從 Angular 7 上傳到 Laravel 的問題

Question

我搜索了很多，但沒有問題可以解決我的問題，我正在嘗試將一個簡單的圖像發送到我的 Laravel 6.6 版本中的服務器。

這是我的 Angular 7 一面

    const formData = new FormData();
    formData.append('file', this.files[0]);

    this.categoryService.store(category, formData).subscribe(
      response => { console.log(response); },
      error => {
        console.log(error);
      }
    );

  public store(categoryData: CategoryModel, filesData: FormData): Observable<any> {
    return this.http.post(this.mainConfig.config.default.mainUrl + this.STORE_CATEGORY_URL, filesData)
   .pipe(timeout(this.timeOut));
  }

在我的 Laravel 方面，我只想檢查文件是否到達

    if($request->hasFile('file')) {
        $response["success"] = 1;
        $response["message"] = "Tem um arquivo";
        return $response;
    } else {
        $response["success"] = 0;
        $response["message"] = "Não tem um arquivo";
        return $response;
    }

我發現我的問題我的 API 的每個請求都有一個令牌攔截器，就像這樣：

  const newRequest = request.clone({
        setHeaders: {
          Authorization: `Bearer ${this.token}`
        },
        body: {
          ...request.body,
          companyCode: this.userData.companyCode,
        },
      });

當我刪除這一行

   body: {
              ...request.body,
              companyCode: this.userData.companyCode,
            },

它工作正常，我使用它在后端發送我的租戶數據庫連接的公司代碼，在每個請求中，我發送 companyCode，但是當我將它與 formData 一起使用時，為什么不起作用？

Answer 1

上傳應始終使用httpClient上的put請求完成，因為文件上傳將在較小的塊 (4kb) 中完成。 post不能連續傳輸，只有在傳輸第一個塊后才會剪切。 您可以直接使用該file作為正文。 您不應將FormData用於圖像，因為它會附加FormData標頭並損壞圖像。

this.categoryService.store(category,this.selectedFile).subscribe(
      response => { console.log(response); },
      error => {
        console.log(error);
      }
    )

修改服務如下

 public store(categoryData: CategoryModel,selectedFile:any): Observable<any> {
    return this.http.put(this.mainConfig.config.default.mainUrl + this.STORE_CATEGORY_URL, selectedFile)
   .pipe(timeout(this.timeOut));
  }

Answer 2

我解決了檢查 FormData 實例的問題，現在它正在工作

if (!!this.token) {
          let newRequest;
          if (request.body instanceof FormData) {
            const formData = request.body;
            formData.append('companyCode', this.userData.companyCode);
            newRequest = request.clone({
              setHeaders: {
                Authorization: `Bearer ${this.token}`
              },
            });
            return next.handle(newRequest);
          } else {
            newRequest = request.clone({
              setHeaders: {
                Authorization: `Bearer ${this.token}`
              },
              body: {
                ...request.body,
                companyCode: this.userData.companyCode,
              },
            });
            return next.handle(newRequest);
          }
        }