如何将图像从 React 应用程序发送到 api 服务器答案

【问题标题】：How to send image from React app to api server如何将图像从 React 应用程序发送到 api 服务器
【发布时间】：2026-01-07 23:10:01
【问题描述】：

我需要帮助实现将图像从 React 应用程序发送到服务器 api。在 React 中，我使用库 FilePond 发送图像，效果很好，但我不知道如何在服务器上获取此图像，我使用 NETTE 框架和 apitte 库来请求。如果您知道如何以另一种方式发送和获取图像，请写信。非常感谢！

例如我如何在 react 中使用 FilePond

<FilePond allowMultiple={true} server={"http://localhost:3000" + this.baseProperties.uploadUrl}/>

和部分php代码

/**
     * @Path("/upload")
     * @Method("POST")
     * @param ApiRequest $request
     * @return string
     */
    public function uploadImage(ApiRequest $request)
    {
        return 'check';
    }

【问题讨论】：

我对后端框架没有任何经验。 FilePond 发送一个默认的表单帖子，在FilePond PHP API 我使用 $_FILES 来访问文件数据。也许 Apitte/Nette 也有类似的东西？

标签： reactjs image api server upload

【解决方案1】：

文档不是很清楚，但文件池将使用与所采取的 REST 操作相对应的 HTTP 动词来访问您指定的任何 API（在您的情况下为 http://localhost:3000）。例如，如果你设置了这个。（在反应中注意这一点）

 server={
            {
              'url': 'localhost:3000/filepondBackend',

然后文件池将使用以下 HTTP 动词访问 localhost:3000/filepondBackend 端点：POST、GET、DELETE

这是一个如何在 spring 中映射后端的示例

@RequestMapping("/filepondBackend")

@DeleteMapping(produces = "application/json")
  @ApiOperation(value = "Deletes file from DataBase")
  public ResponseEntity<ResponseDTO> deleteFile(
      @RequestHeader HttpHeaders headers

     { 
       delete logic 
     });


@PostMapping(produces = "application/json")
  @ApiOperation(value = "Inserts file into DataBase")
  public ResponseEntity<ResponseDTO> postFile(
      @RequestHeader HttpHeaders headers, @RequestParam("filepond") MultipartFile file
     { 
      post logic 
     }); 

 @GetMapping(produces = "application/json")
  @ApiOperation(value = "Retrieve file from DataBase")
  public ResponseEntity<ResponseDTO> getFile(
      @RequestHeader HttpHeaders headers
  )
     { 
      get logic 
     });

希望对您有所帮助。

【讨论】：