從 React 和 Spring Boot 上傳 CSV 文件

Question

也許有人知道如何解決上傳文件到后端的問題。 從 Postman 發送文件看起來像但是從 React 上傳后，我有這樣的異常：

2020-11-09 18:17:38.829 DEBUG 10764 --- [nio-8081-exec-7] osweb.servlet.DispatcherServlet : POST "/api/employees/save-from-csv", parameters={masked} 2020 -11-09 18:17:38.829 DEBUG 10764 --- [nio-8081-exec-7] swsmmaRequestMappingHandlerMapping：映射到 com.bank.controller.EmployeeController#uploadFile(MultipartFile, Model) 2020-11-09 18:17: 38.831 調試 10764 --- [nio-8081-exec-7] .wsmmaServletInvocableHandlerMethod：無法解析公共 org.springframework.http.ResponseEntity<com.bank.message.ResponseMessage> com.bank.controller.EmployeeController 中的參數 [0] .uploadFile(org.springframework.web.multipart.MultipartFile,org.springframework.ui.Model) 拋出 java.io.IOException：所需的請求部分“文件”不存在 2020-11-09 18:17:38.831 DEBUG 10764 - -- [nio-8081-exec-7] .mmaExceptionHandlerExceptionResolver ：使用@ExceptionHandler com.bank.exceptions.FileUploadExceptionAdvice#handleException(Exception, WebRequest) 2020-11-09 18:17:38.832 DEBUG 10764 --- [nio-8081 -執行- 7] oswsmmaHttpEntityMethodProcessor : [application/json, text/plain, /] 不匹配, 支持: [] 2020-11-09 18:17:38.833 WARN 10764 --- [nio-8081-exec-7] .mmaExceptionHandlerExceptionResolver :已解決 [org.springframework.web.multipart.support.MissingServletRequestPartException：所需的請求部分“文件”不存在] 2020-11-09 18:17:38.837 DEBUG 10764 --- [nio-8081-exec-7] osweb。 servlet.DispatcherServlet : 已完成 400 BAD_REQUEST

此代碼用於從 React 表單發送文件：

class UploadFiles extends Component{

state = {
    file : ''
};

componentDidMount = () => {
    const {file} = this.props;
    this.setState({ file })
};

uploadFile = ({target : {files}}) => {
    console.log(files[0]);
    let data = new FormData();
    data.append('file', files);


    axios.post("/api/employees/save-from-csv", data)
        .then(res => {console.log(res)})
};

render(){
    return(
        <div className="container">
            <div className="row">
                <div className="col-md-6">
                    <div className="form-group files color">
                        <label>Upload Your File </label>
                        <input type="file" onChange={this.uploadFile}/>
                    </div>
                </div>
            </div>
        </div>
    )
}}

服務

public void csvToEmployees(@RequestParam("file") MultipartFile file, Model model) {
    // validate file
    if (file.isEmpty()) {
        model.addAttribute("message", "Please select a CSV file to upload.");
        model.addAttribute("status", false);
    } else {

        try (Reader reader = new BufferedReader(new InputStreamReader(file.getInputStream()))) {

            CsvToBean csvToBean = new CsvToBeanBuilder(reader)
                    .withType(Employee.class)
                    .withIgnoreLeadingWhiteSpace(true)
                    .build();

            List users = csvToBean.parse();
            employeeRepository.saveAll(users);

            model.addAttribute("users", users);
            model.addAttribute("status", true);

        } catch (Exception ex) {
            model.addAttribute("message", "An error occurred while processing the CSV file.");
            model.addAttribute("status", false);
        }
    }

}

控制器

 @PostMapping("/employees/save-from-csv")
public ResponseEntity<ResponseMessage> uploadFile(@RequestParam("file") MultipartFile file, Model model) throws IOException {
    ResponseEntity<ResponseMessage> result = null;
    boolean finished = false;
    String message = "";

    if (CSVHelper.hasCSVFormat(file)) {
        try {
            service.csvToEmployees(file, model);
            message = "Uploaded the file successfully: " + file.getOriginalFilename();
            result = ResponseEntity.status(HttpStatus.OK).body(new ResponseMessage(message));
            finished = true;
        } catch (Exception e) {
            message = "Could not upload the file: " + file.getOriginalFilename() + "!";
            message += e;
            result = ResponseEntity.status(HttpStatus.UNPROCESSABLE_ENTITY).body(new ResponseMessage(message));
            finished = true;
        }
    }
    if (!CSVHelper.hasCSVFormat(file)){

        message = "File is empty!";
        result = ResponseEntity.status(HttpStatus.NOT_FOUND).body(new ResponseMessage(message));
    }
    if (!finished) {
        message = "Please upload a csv file!";
        result = ResponseEntity.status(HttpStatus.BAD_REQUEST).body(new ResponseMessage(message));
    }
    return result;
}

CSVHelper

public class CSVHelper {

    public static boolean hasCSVFormat(MultipartFile file) {

        String TYPE = "text/csv";
        return TYPE.equals(file.getContentType());
    }

    public static List<Employee> csvToEmployees(InputStream is) {
        try (BufferedReader fileReader = new BufferedReader(new InputStreamReader(is, "UTF-8"));
             CSVParser csvParser = new CSVParser(fileReader,
                     CSVFormat.DEFAULT.withFirstRecordAsHeader().withIgnoreHeaderCase().withTrim());) {

            List<Employee> employees = new ArrayList<>();

            Iterable<CSVRecord> csvRecords = csvParser.getRecords();

            for (CSVRecord csvRecord : csvRecords) {
                Employee employee = new Employee(
                        Long.parseLong(csvRecord.get("Id")),
                        csvRecord.get("Name"),
                        Long.parseLong(csvRecord.get("DepartmentId")),
                        Double.parseDouble(csvRecord.get("Salary")),
                        csvRecord.get("City"),
                        csvRecord.get("Street"),
                        csvRecord.get("BankName"),
                        csvRecord.get("CardNumber")
                );

                employees.add(employee);
            }

            return employees;
        } catch (IOException e) {
            throw new RuntimeException("fail to parse CSV file: " + e.getMessage());
        }
    }

}

單元測試

@Test
    public void saveEmployeesFromCSV() throws Exception {
        String url = "/api/employees/save-from-csv";


        String csvBuilder = "name,departmentId,salary,city,street,bankName,cardNumber\n" +
                "Maxim,1,3855,Madrid,Street,Bank York,NY98675432100\n";
        InputStream is = new ByteArrayInputStream(csvBuilder.getBytes());

        MockMultipartFile mockFile = new MockMultipartFile("file", "employees.csv", "text/csv", is);

        MockHttpServletResponse responseMessage = mvc.perform(MockMvcRequestBuilders.multipart(url)
                .file(mockFile)
                .param("file", "employees2.csv"))
                .andReturn()
                .getResponse();
        assertEquals(responseMessage.getStatus(), 200);
    }

Answer 1

好的，這花了我一些時間，雖然這是你犯的一個很小的錯誤。

在您的反應代碼中，您設置了文件數組，該數組在您的FormData作為file傳遞。

這里正確的做法是只將數組的一個 File 設置為FormData內容：

uploadFile = ({target : {files}}) => {
    console.log(files[0]);
    let data = new FormData();
    data.append('file', files[0]); <- this here is where the error was


    axios.post("/api/employees/save-from-csv", data)
        .then(res => {console.log(res)})
};