时间戳

首页 > 解决方案 > 如何将图像从 React 应用程序发送到 api 服务器

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

问题描述

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

例如我如何在反应中使用 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';
    }

标签： reactjsimageapiserverupload

解决方案

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

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

希望有帮助。

推荐阅读