從 Angular 9 到 Laravel 的文件上傳不起作用

Question

我正在嘗試將圖像從angular 9上傳到Laravel 。 我在本地機器上配置了 angular 項目。 而 Laravel 項目在另一台服務器上。 我正在使用 api 調用從 larvel 獲取數據到 angular。 一切正常，但文件上傳不起作用。 進入服務器的請求是 null。（在用戶控制器中）下面是我的代碼：

Angular

product.component.html [文件上傳表格]

<form [formGroup]="mediaFormGroup" (ngSubmit)="uploadMedia()">
<label>Image:</label>
<input  type="file" name="media_file" (change)="onFileChange($event)" />
<button type="submit" [disabled]="mediaStatus">Upload</button> 
</form>

product.component.ts [文件更改function和上傳功能]

onFileChange(event) {
if (event.target.files.length > 0) {
this.file = event.target.files[0];
this.thumbFileName = <File>event.target.files[0].name;
var reader = new FileReader();  
reader.onload = (event: any) => {  
      this.thumbUrl = event.target.result;  
}  
reader.readAsDataURL(this.file);  
}
}

uploadMedia(){
const formData = new FormData();
const headers = new HttpHeaders();
headers.append('Content-Type', 'multipart/form-data');
headers.append('Accept', 'application/json');
formData.append('thumbimage', this.file);
this.http.post(`${this.API_URL}/user/uploadImage`, formData, {
      headers: headers
      }).subscribe(data => {
          return data;
      });
}

Laravel

路線/api.php

Route::post('user/uploadImage', "User\UserController@uploadImage");

UserController.php

public static function uploadImage(Request $request){
       //return $request;  // null
 if ($request->hasFile('thumbimage'))
 {
       $file      = $request->file('thumbimage');
       $filename  = $file->getClientOriginalName();
       $extension = $file->getClientOriginalExtension();
       $picture   = date('His').'-'.$filename;
       $file->move(public_path('tImg'), $picture);
       return response()->json(["message" => "Image Uploaded Succesfully"]);
  }else{
       return response()->json(["message" => "Select image first."]); // returns this
  }
}

uploadImage function 首先返回Select 圖像

請求在服務器中獲取為null 。

我的代碼有什么問題？ 我想有人可以幫助我..

Answer 1

我也有這個問題。 我最終使用了 PHP 文件數組。

$_FILES['filename']['tmp_name']

導入這個 class：

use Illuminate\Http\UploadedFile;

然后創建一個新的 UploadedFile；

$name = $_FILES['filename']['name'];
$tempPath = $_FILES['filename']['tmp_name']
$file = new UploadedFile(
    $tempPath,
    $name,
);

// do other stuff
$original_name = $file->getClientOriginalName();
$ext = strtolower($file->getClientOriginalExtension());
$size = $file->getSize();
$type = $file->getMimeType();

$hashName = $file->hashName();
 

如果您有多個文件：

// $_FILES['filename']['name'] 'An associative array of items uploaded to the 
// current script via the HTTP POST method'
$files = $_FILES['filesarray']
for ($i = 0; $i < count($files['name']); $i++) {
    $name = $files['name'][$i];
    $file = new UploadedFile(
        $files['tmp_name'][$i],
        $name  
    );
    // Do stuff with file
};

有關 PHP $_FILES 數組的更多信息，請查看文檔：

https://www.php.net/manual/en/features.file-upload.post-method.php

Answer 2

當我從 http 標頭中刪除 'Content-Type': 'multipart/form-data' 時，它對我有用。

this.httpOptions = {
    headers: new HttpHeaders({
         'Accept': 'application/json',
         'Authorization': 'Bearer ' + this.apiToken
   })
};