ReactJs上传文件并传JsonString至Java Tomcat后端失败求助

一、React前端正确请求代码 #

问题核心是手动指定multipart/form-data请求头导致后端无法解析分块数据——FormData会自动生成包含boundary的正确请求头，无需手动设置。修改后的代码如下：

const formData = new FormData();
formData.append('file', selectedFile);
// 确保MY_JSONSTRING是字符串格式的JSON数据
formData.append('jsonstring', MY_JSONSTRING);

const req = new Request(PARAMETRI_URL, {
    method: 'POST',
    body: formData
    // 移除手动设置的Content-Type，浏览器会自动处理
});

// 发起请求示例
fetch(req)
    .then(res => res.json())
    .then(data => console.log('上传成功', data))
    .catch(err => console.error('上传失败', err));

二、Java Tomcat后端处理代码 #

1. 确保Servlet类添加@MultipartConfig注解以支持文件上传；
2. 读取jsonstring需从Part的输入流中提取内容；
3. 处理文件时可获取文件名并读取文件流。

import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.nio.charset.StandardCharsets;

@WebServlet("/upload") // 请根据实际接口路径调整
@MultipartConfig(
        fileSizeThreshold = 1024 * 1024 * 2, // 2MB 内存缓存阈值
        maxFileSize = 1024 * 1024 * 10,      // 单文件最大10MB
        maxRequestSize = 1024 * 1024 * 50    // 整个请求最大50MB
)
public class UploadServlet extends HttpServlet {
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("application/json;charset=UTF-8");

        // 读取JSON字符串参数
        Part jsonPart = request.getPart("jsonstring");
        StringBuilder jsonContent = new StringBuilder();
        try (BufferedReader reader = new BufferedReader(
                new InputStreamReader(jsonPart.getInputStream(), StandardCharsets.UTF_8))) {
            String line;
            while ((line = reader.readLine()) != null) {
                jsonContent.append(line);
            }
        }
        String jsonString = jsonContent.toString();
        // 此处可根据需求将JSON字符串转为Java对象（如使用Jackson/Gson）

        // 处理上传的文件
        Part filePart = request.getPart("file");
        String fileName = getFileName(filePart);
        // 示例1：将文件保存到服务器指定路径
        // filePart.write("/your/save/path/" + fileName);
        // 示例2：直接读取文件流处理
        // InputStream fileStream = filePart.getInputStream();

        // 返回上传结果
        response.getWriter().write("{\"status\":\"success\"}");
    }

    // 从请求头中提取文件名的工具方法
    private String getFileName(Part part) {
        String contentDisposition = part.getHeader("content-disposition");
        for (String token : contentDisposition.split(";")) {
            if (token.trim().startsWith("filename")) {
                return token.substring(token.indexOf('=') + 1).trim().replace("\"", "");
            }
        }
        return "unknown-file";
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }
}

关键注意事项 #

• 前端需确保selectedFile是从<input type="file">的change事件中获取的真实File对象；
• 后端@WebServlet的路径需与前端请求URL完全匹配；
• 根据业务需求调整@MultipartConfig中的文件大小限制；
• IO流操作务必使用try-with-resources语法自动关闭，避免资源泄漏。

内容的提问来源于stack exchange，提问作者Fausto70