从 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
   })
};