来自React / Node的MultipartFile上传问题

时间:2018-05-24 09:48:00

标签: java node.js reactjs spring-mvc multipartform-data

我有以下JAVA控制器:

    @RequestMapping(value = "/data/upload", method = RequestMethod.POST)
    public
    @ResponseBody
    void uploadData(@RequestParam("file") MultipartFile file) throws IOException {
        logger.info("Received File for Ingestion");
        dataUploadService.processData(file.getInputStream());
    }

节点服务器端代码:

serviceCall(serviceCallRequestData, request, finalResponse) {
        logger.info('Making remote request: ' + JSON.stringify(serviceCallRequestData));

        let file = request.files['file']; // file: Object {name: "sample_aspect_review_upload.csv", encoding: "7bit", mimetype: "text/csv", mv: }
        let formData = new FormData();
        formData.append('file', Buffer.from(file.data));

        fetch(serviceCallRequestData.url, {
            method: serviceCallRequestData.requestObject.method,
            headers: serviceCallRequestData.requestObject.headers,
            body: formData
        }).then(response => {
            if (response.status !== 200) {
                logger.error(`Error while making http call requestData: ${JSON.stringify(serviceCallRequestData)}`);
                finalResponse.status(500).send('Internal server error');
                return;
            }

            return response.json();
        }).then((json) => {
            logger.info(`Returning response for aspect-review-file-upload: ${JSON.stringify(json)}`);
            finalResponse.status(200).send(JSON.stringify(json));
        }).catch((e) => {
            logger.error(`Error while making http call requestData: ${JSON.stringify(serviceCallRequestData)} error: ${JSON.stringify(e)}`);
            finalResponse.status(500).send('Internal server error');
        });
    }

尝试上传csv文件,例如:

"product_id","review_id","aspect_id","rating","confidence_score","indices"
"pid","rid","aid",1,0.851955,"[{\"s\":0,\"e\":114,\"highlights\":[39,68]}]"

从POSTMAN轻松上传。见下面的截图: enter image description here

在JAVA中获取错误:收到未知异常org.springframework.web.bind.MissingServletRequestParameterException:必需的MultipartFile参数'file'不存在 当我没有从React传递contentType标题时。

在JAVA中获取错误: org.apache.commons.fileupload.FileUploadException:当我将来自React的contentType标头作为“Content-Type”传递时,请求被拒绝,因为没有找到多部分边界 :'multipart / form-data'

JAVA dropwizard控制器的相同节点服务器端代码为:

    @POST
    @Consumes(MediaType.MULTIPART_FORM_DATA)
    @Produces(MediaType.APPLICATION_JSON)
    public Response uploadFile(
            @FormDataParam("file") InputStream inputStream,
            @FormDataParam("file") FormDataContentDisposition fileDetail
    ) throws IOException {
        logger.debug("Request to upload data file-name: {}", fileDetail.getName());

        dataUploadService.processData(inputStream);
        return Response.ok().build();
    } 

正常工作。

我做错了什么?请帮忙

3 个答案:

答案 0 :(得分:3)

很少有人猜测:

  1. 在REST端点定义中,指定file for be request参数,该参数用于从URI本身提取参数,而多部分文件上载则位于POST请求的主体内。

    添加consumes={}而不是@RequestParam,您可以使用@RequestBody注释:

    @RequestMapping(value = "/data/upload", method = RequestMethod.POST,
      consumes = {"multipart/mixed", "multipart/form-data"}
    )
    void uploadData(@RequestBody MultipartFile file) //body will be the whole JSON payload
    

    或者更好地使用@RequestPart来命名元素:

    @RequestMapping(value = "/data/upload", method = RequestMethod.POST,
      consumes = {"multipart/mixed", "multipart/form-data"}
    )
    void uploadData(@RequestPart (value="file") MultipartFile file) //gets file from JSON
    
  2. FormData提供选项:

    form.append('file', Buffer.from(file.data), {
      filename: 'image1.jpg', // ... OR:
      filepath: 'photos/image1.jpg',
      contentType: 'image/jpeg',
      knownLength: 19803
    });
    
    form.submit('http://example.com/', function(err, res) {
      if (err) throw err;
      console.log('Done');
    });
    
  3. 您能否确认(使用 WireShark 之类的内容)从React发送的确切内容?

答案 1 :(得分:2)

从邮递员的卷曲中你可以看到以下命令:

curl -i -X POST -H "Content-Type:multipart/form-data" -F "file=@\"/pathto/sample.csv\";type=text/csv;filename=\"sample.csv\"" 'http://localhost:8080/data/upload'

所以我尝试在表单数据中添加type=text/csv;filename=\"sample.csv\" 所以这应该有效:

    let file = request.files['file'];
    let formData = new FormData();
    formData.append("file", Buffer.from(file.data), {
        filename: file.name,
        contentType: file.mimetype,
    });

    fetch(serviceCallRequestData.url, {
        method: serviceCallRequestData.requestObject.method,
        headers: serviceCallRequestData.requestObject.headers,
        body: formData
    }).then(response => {
        if (response.status !== 200) {}
    });

答案 2 :(得分:0)

我在这个问题上花了几个小时,但我没想到这个问题是我传递的一个值,而不是其他东西,因为消息声明密钥不存在: “所需的请求部分‘图像’不存在”

最后我发现我正在传递一个文件数组,并希望它像在 POSTMAN 中一样正常工作! 但是我必须遍历我的数组并每次按下相同的键才能如下所示..

formData.append('images', images[0]);
formData.append('images', images[1]);

这是我的代码接受文件数组的样子

@RequestMapping(value = "/upload", headers = ("content-type=multipart/*"), method = RequestMethod.POST, consumes = { "multipart/mixed", MediaType.MULTIPART_FORM_DATA_VALUE })
    public ResponseEntity<?> addPicture(
      @RequestParam(value="images") MultipartFile[] images) throws IOException {