首页 > 解决方案 > 无法从 Angular 到 Symfony 检索已发布的表单和文件数据

问题描述

我正在尝试使用 angular 和 symfony 进行基本的图像上传。

我们有我们的基本形式

<div class="form-group">
  <input type="file" #fileUpload (change)="selectFile()"/>
</div>

它的打字稿对应......

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {ApiService} from "../../services/api.service";
import {ApiResponseInterface} from "../../interfaces/apiResponse.interface";
import {HttpClient, HttpHeaders} from "@angular/common/http";


@Component({
  selector: 'app-tester',
  templateUrl: './tester.component.html',
  styleUrls: ['./tester.component.scss']
})
export class TesterComponent implements OnInit {

  @ViewChild("fileUpload",{static: false}) fileUpload: ElementRef;

  constructor(private api: ApiService, private http: HttpClient) { }

  ngOnInit() {
  }

  selectFile(){

    console.log(this.fileUpload.nativeElement.files)


    const fileList: FileList = this.fileUpload.nativeElement.files;

    const theFile: File = fileList[0];


    let formData = new FormData();
    formData.append('file',theFile,theFile.name);
    formData.append('something','test');



    this.http.post('http://api.admireme.vip.local:8080/tester',formData).subscribe((resp:any)=>{

    });


  }

}

它将表单数据发送到我们的 TestController

<?php

namespace App\Controller;


use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;


/**
 * Class TestController
 * @package App\Controller
 */
class TestController extends BaseController{

      /**
       * @Route("/tester", name="testerRoute")
       * @param Request $request
       * @return JsonResponse
       */
      public function tester(Request $request) : JsonResponse{


            return $this->json([
                'other'=>$request->get('something'),
                'files'=>$request->files->get('file')
            ]);

      }

}

所以我们可以很好地选择一个文件。但是当我试图抓取数据时,就像我在无法抓取数据之前做了一百次一样。

但是它以我不熟悉的方式发送它。

REQUEST PAYLOAD--->

------WebKitFormBoundary3i9AnjOpWTHJspwt
Content-Disposition: form-data; name="file"; filename="DSC_0359.jpg"
Content-Type: image/jpeg


------WebKitFormBoundary3i9AnjOpWTHJspwt
Content-Disposition: form-data; name="something"

test
------WebKitFormBoundary3i9AnjOpWTHJspwt--

回应是....

{"other":null,"files":null}

我该怎么做才能使这些数据可用?我以前没见过这个

标签: phpangulartypescriptsymfony

解决方案


推荐阅读