Java：使用 JavaScript 上传图像 - 文件已损坏、损坏或太大

Question

我使用 Spring Boot 作为后端服务器，并且我有一个 JavaScript 前端。 为了在前端和后端之间发送数据，我使用 Axios library，它通常工作得很好。

问题：
该图像在 (Chrome) 浏览器控制台中如下所示： 这是一个非常长的字母数字字符串，这就是我使用以下代码发送到服务器的内容：

static uploadFiles(files) {
    const data = new FormData();

    Object.keys(files).forEach(key => {
        data.append("files", new Blob([files[key]], { type: 'image/jpeg' }));
    });

    const url = API_URL + "uploadFiles";
    return axios.post(url, data, RestServices.getAuth({
        "Content-Type": "multipart/form-data;boundary=gc0p4Jq0M2Yt08jU534c0p"
    }));
}

我不知道 boundary 的作用是什么，但它可以在后端接收文件...

在后端（弹簧）方面，我成功收到了一个 MultipartFiles 数组：

@RequestMapping(value = "/uploadFiles", method = RequestMethod.POST)
@ResponseBody
public boolean uploadFiles(HttpServletRequest request, @RequestParam("files") MultipartFile[] files) throws IOException {
    String filePath = Thread.currentThread().getContextClassLoader().getResource("assets/images/").getFile();
    InputStream inputStream;
    OutputStream outputStream;
    for(MultipartFile file : files) {
        File newFile = new File(filePath + file.getOriginalFilename() + ".jpg");
        inputStream = file.getInputStream();

        if (!newFile.exists() && newFile.createNewFile()) {
            outputStream = new FileOutputStream(newFile);
            int read;
            byte[] bytes = new byte[1024];

            while ((read = inputStream.read(bytes)) != -1) {
                outputStream.write(bytes, 0, read);
            }
        }
        System.out.println(newFile.getAbsolutePath());
    }
    return true;
}

我也尝试过 file.transferTo(newFile); 而不是 in- 和 outputstreams - 这也不起作用。
之后我得到以下输出，这意味着图像已成功保存： /path/to/blob.jpg
如果我检查文件上传的路径，有一个名为 blob.jpg 的文件，但如果我打开它，windows 照片查看器会出现以下问题： 我在使用 notepad++ 上传之前和之后打开了图片：
之前上传： 我认为这是一个字节数组，但如果我打开图片上传后我得到完全浏览器的输出。这意味着它没有被转换为字节数组（如果我错了，请纠正我），我相信这就是为什么它是一个损坏的图像......

我的问题是：

• 有什么问题？
• 如何我可以修复它？

我真的尝试了所有我想到的东西，但我没有想法。

感谢您的帮助！ :-)

我已阅读以下*相关*问题（但他们**没有**有答案）：
[问题 1][5]、[问题 2][6] 和 **许多** 更多...

Answer 1

我终于自己找到了答案！

我认为问题在于我使用了e.target.result（用于在前端显示图像）但我不得不使用JS File object。标准的 HTML 5 文件输入字段返回那些 File 对象（正如我读过的 here）。

我现在唯一要做的就是创建一个 FormData 对象，附加文件对象，将 FormData 设置为 Body 并设置 Content-Type 标头，就是这样！

const data = new FormData();
data.append("files", fileObject);
return axios.post(url, data, {
    "Content-Type": "multipart/form-data"
});

那些 JS 文件对象被 Java 识别为 Multipart 文件：

@RequestMapping(value = "/uploadFiles", method = RequestMethod.POST)
@ResponseBody
public boolean uploadFiles(HttpServletRequest request, @RequestParam("files") MultipartFile[] files) {

    boolean transferSuccessful = true;

    for (MultipartFile file : files) {
        String extension = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf('.'));

        String newFileName = genRandomName() + extension; //set unique name when saving on server
        File newFile;

        File imageFolder = new File(imageBasePath);
        //check if parent folders exist else create it
        if(imageFolder .exists() || imageFolder .mkdirs()) {
            while ((newFile = new File(imageFolder .getAbsolutePath() + "\\" + newFileName)).exists()) {
                newFileName = genRandomName(); //generate new name if file already exists
            }
            try {
                file.transferTo(newFile);
            } catch (IOException e) {
                e.printStackTrace();
                transferSuccessful = false;
            }
        } else {
            LOG.error("Could not create folder at " + imageFolder.getAbsolutePath());
            transferSuccessful = false;
        }
    }
    return transferSuccessful;
}

我希望这会有所帮助:)