响应前在Spring控制器中发送更新或进度

响应前在Spring控制器中发送更新或进度,spring,spring-mvc,reactjs,Spring,Spring Mvc,Reactjs,我有一个表单,允许用户上传CSV文件,随后使用Superagent对后端的控制器进行POST调用,该控制器解析文件并执行到表中的批插入。我想在前端实现一个进度条,用于侦听来自控制器的更新,以显示解析/插入的进度。在前端,我使用React,目前正在这样打电话: request.post('/api/uploadFile') .send(csvFile) .on('progress', function(e) { console.log('

我有一个表单,允许用户上传CSV文件,随后使用Superagent对后端的控制器进行POST调用,该控制器解析文件并执行到表中的批插入。我想在前端实现一个进度条,用于侦听来自控制器的更新,以显示解析/插入的进度。在前端,我使用React,目前正在这样打电话:

  request.post('/api/uploadFile')
        .send(csvFile)
        .on('progress', function(e) {
            console.log('Percentage done: ', e.percent);
        })
        .end((err, resp) => {
            if (err) {
                $("#loading").hide();
                console.log("Error in file upload");
                console.error(err);
                alert("Failed to upload. " + err + "\n (" + err.status + ") " + resp.text);
            }
            else {
                $("#loading").hide();
                console.log(resp);
                alert("Success. " + resp.text);
                return resp;
            }
        });
      }
@RequestMapping(value="/api/uploadFile", method=RequestMethod.POST)
    public @ResponseBody ResponseEntity<String> handleFileUpload(@RequestParam("file") MultipartFile file){
        if (!checkCSV(file)) {
            return ResponseEntity.status(HttpStatus.UNPROCESSABLE_ENTITY).body("Not CSV");
        }
        if (file.isEmpty()) {
            return ResponseEntity.status(HttpStatus.UNPROCESSABLE_ENTITY).body("File is empty");
        }
        MySQLAccess db = new MySQLAccess();
        File fileToParse = convertToFile(file);

        /* Call helper function that parse CSV file & execute batch inserts & creates join tables */

        return ResponseEntity.ok("File was uploaded.");
    }
当我发送文件时,progress event listener会自动显示100%,这是不正确的(发送看起来是即时的,但在收到响应之前,它实际上不知道从另一端到达了多少)。在后端,我有这样一个控制器:

  request.post('/api/uploadFile')
        .send(csvFile)
        .on('progress', function(e) {
            console.log('Percentage done: ', e.percent);
        })
        .end((err, resp) => {
            if (err) {
                $("#loading").hide();
                console.log("Error in file upload");
                console.error(err);
                alert("Failed to upload. " + err + "\n (" + err.status + ") " + resp.text);
            }
            else {
                $("#loading").hide();
                console.log(resp);
                alert("Success. " + resp.text);
                return resp;
            }
        });
      }
@RequestMapping(value="/api/uploadFile", method=RequestMethod.POST)
    public @ResponseBody ResponseEntity<String> handleFileUpload(@RequestParam("file") MultipartFile file){
        if (!checkCSV(file)) {
            return ResponseEntity.status(HttpStatus.UNPROCESSABLE_ENTITY).body("Not CSV");
        }
        if (file.isEmpty()) {
            return ResponseEntity.status(HttpStatus.UNPROCESSABLE_ENTITY).body("File is empty");
        }
        MySQLAccess db = new MySQLAccess();
        File fileToParse = convertToFile(file);

        /* Call helper function that parse CSV file & execute batch inserts & creates join tables */

        return ResponseEntity.ok("File was uploaded.");
    }
@RequestMapping(value=“/api/uploadFile”,method=RequestMethod.POST)
public@ResponseBody ResponseEntity handleFileUpload(@RequestParam(“文件”)多部分文件){
如果(!checkCSV(文件)){
返回ResponseEntity.status(HttpStatus.UNPROCESSABLE_ENTITY).body(“非CSV”);
}
if(file.isEmpty()){
返回ResponseEntity.status(HttpStatus.UNPROCESSABLE_ENTITY).body(“文件为空”);
}
MySQLAccess db=新的MySQLAccess();
File fileToParse=convertToFile(文件);
/*调用helper函数,解析CSV文件、执行批插入并创建联接表*/
返回ResponseEntity.ok(“文件已上载”);
}
我想在我的控制器中交错进度状态(我可以设置),该状态将更新前端文件上载的步骤:解析/批插入/表创建,等等。我想这样做是因为我的应用程序目前部署在Heroku上,我一直在点击请求超时,因为文件上传过程大约需要1分钟,这超过了Heroku为H12请求超时设置的30秒窗口,如果它没有接收到一个字节返回到客户端(我假设如果我正在发回更新,它可能会阻止这些超时?)。是否有人对如何在发回响应之前从我的控制器发送更新以更新进度有任何建议