Angular上传图片至TYPO3后端，控制器无法读取请求体

第一步：修正Angular端代码 #

你手动设置Content-Type: multipart/form-data是错误的——当使用FormData时，Angular的HttpClient会自动生成包含正确boundary的Content-Type头，手动设置会丢失boundary，导致后端无法解析请求体。

修改后的TypeScript代码：

uploadFile(event: any){
    const file: File = event.target.files[0];
    
    const formData = new FormData();
    formData.append('filename', 'myimage');
    formData.append('file', file);
    
    // 移除手动设置的Content-Type头
    this.http.post(`<serverurl>/fileupload/upload/`, formData);
}

第二步：TYPO3后端正确读取文件的方式 #

方式1：通过ServerRequest直接获取上传文件 #

在你的FileUploadController中，通过TYPO3的ServerRequest对象获取上传的文件：

use Psr\Http\Message\ServerRequestInterface;
use TYPO3\CMS\Core\Http\UploadedFile;

public function uploadAction(ServerRequestInterface $request){
    // 获取上传的文件对象
    /** @var UploadedFile $uploadedFile */
    $uploadedFile = $request->getUploadedFiles()['file'] ?? null;
    
    if ($uploadedFile && $uploadedFile->getError() === UPLOAD_ERR_OK) {
        // 获取文件名
        $originalFilename = $uploadedFile->getClientFilename();
        // 获取文件临时路径
        $tempFilePath = $uploadedFile->getStream()->getMetadata('uri');
        
        // 后续可以将文件移动到目标目录，比如：
        // $targetPath = 'path/to/your/target/directory/' . $originalFilename;
        // $uploadedFile->moveTo($targetPath);
    }
}

方式2：利用Extbase属性映射（推荐） #

如果你用的是Extbase控制器，可以直接在动作参数中声明UploadedFile类型的参数，Extbase会自动映射上传的文件：

use TYPO3\CMS\Core\Http\UploadedFile;

public function uploadAction(UploadedFile $file, string $filename){
    if ($file->getError() === UPLOAD_ERR_OK) {
        // 处理文件，比如移动到指定目录
        $targetPath = 'path/to/your/storage/' . $filename . '.' . pathinfo($file->getClientFilename(), PATHINFO_EXTENSION);
        $file->moveTo($targetPath);
    }
}

注意：这里的参数名$file要和FormData中append的键名（formData.append('file', file)）一致，$filename对应FormData中的filename键。

内容的提问来源于stack exchange，提问作者s.Kas.