如何将文件和JSON数据发送到服务器

Question

tl; dr：在前端使用Angular 6，在后端使用Phalcon的PHP，我可以发送JSON数据或文件没有问题，但我在同一个请求中发送两个问题。

---

以前我使用类似的东西将JSON数据发送到服务器

const HTTP_OPTIONS = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
  }),
  observe: 'response'
};

post(endPoint: string, body: object): Observable<any> {
    return this.http.post<any>(this.apiUrl + endPoint, body, HTTP_OPTIONS)
      .pipe(
        tap(result => this.log(JSON.stringify(result, null, 2))),
        catchError(this.handleError('post', []))
      );
}

我能够使用Phalcon从PHP获取数据

$app = new \Phalcon\Mvc\Micro();
$app->post('/upload', function() use ($app) {

    $input = $app->request->getJsonRawBody();
    // $input now contains my JSON data
});

一段时间后，我需要发送一个文件，所以我使用this answer进行了一些小修改：

postFile(fileToUpload: File, endpoint: string): Observable<any> {
    const formData: FormData = new FormData();
    formData.append('fileKey', fileToUpload, fileToUpload.name);
    return this.httpClient
      .post(endpoint, formData, { headers: {'Authorization': this.jwt} }).pipe(
        tap(result => this.log(JSON.stringify(result, null, 2))),
        catchError(this.handleError('post', []))
      );
  }

我使用the documentation作为指南，没有任何问题我收到了我的文件：

$app->post('/uploads', function() use ($app) {
    if ($app->request->hasFiles() == true) {
        foreach ($app->request->getUploadedFiles() as $file) {
            $file->moveTo('files/' .$file->getname());
        }
    } else {
      $app->response->setStatusCode(400)->sendHeaders();
      $app->response->setJsonContent(['error' => 'no file']);
      return $app->response;
    }
});

问题：现在我想同时发送文件和一些JSON数据。我总是可以上传文件，然后单独发送数据，但我认为这不是正确的方法。我不想超过最小网络呼叫数。

我尝试过：使用文件上传代码，只需用我的JSON数据将另一个字段附加到我的FormData对象

formData.append('fileKey', fileToUpload, fileToUpload.name);
formData.append('data', JSON.stringify(data));

以及它的变化

formData.append('fileKey', fileToUpload, fileToUpload.name);
formData.append('data', new Blob([JSON.stringify(data), {type: 'application/json'}]);

无论哪种方式，在后端我可以得到文件，但$app->request->getJsonRawBody和$app->request->getRawBody是空的。

我也尝试使用原始的JSON发送代码，只是改变一点来包含文件，但没有成功。

post(fileToUpload: File, data: CustomData): Observable<any> {
    this.messageService.add('uploaded file');

    const formData: FormData = new FormData();
    formData.append('fileKey', fileToUpload, fileToUpload.name);
    formData.append('data', JSON.stringify(data), 'data');

    return this.http
      .post(this.apiUrl + 'uploads/', {'data': data, 'file': fileToUpload}, HTTP_OPTIONS).pipe( // file is empty on the server like this
        tap(result => this.log('POST file :\n' + JSON.stringify(result, null, 2))),
        catchError(this.handleError('post', [], 'fileUpload'))
      );
  }

我可以轻松发送我的JSON数据或文件，但不能同时发送。我在使用Angular发送文件和/或JSON时搜索了Phalcon文档和几个QA，但我无法弄清楚如何使其工作。

Answer 1

你在post请求中发送json作为文本，所以你应该尝试类似于$ app-> request-> getJsonRawBody

$rawJson=$app->request->getPost('data');
$object=json_decode($rawJson);

Answer 2

你可以得到你的json @BłażejKowalczyk说

$this->request->getPost()

你可以检查文件并获取它们

if ($this->request->hasFiles()) {
    foreach ($this->request->getUploadedFiles() as $file) {
        // $file is an instance of Phalcon\Http\Request\File
        var_dump($file->getName());
    }
}

查看这些页面以获取更多信息https://docs.phalconphp.com/3.4/en/api/phalcon_http_request https://docs.phalconphp.com/3.4/en/api/phalcon_http_request_file