Java：使用 Java 脚本上传图片 - 文件损坏、损坏或太大

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 有什么作用，但它可以在后端接收文件...

在后端 (spring) 端，我成功收到了一个 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); 而不是输入流和输出流 - 这也不起作用。
之后我得到以下输出，这意味着图像已成功保存： /path/to/blob.jpg
如果我检查文件上传的路径，有一个名为blob.jpg的文件，但如果我打开它，windows照片查看器有以下问题：我用记事本++打开上传前后的图片:
上传前：我认为这是一个字节数组，但是如果我在 after 上传后打开图像，我会得到 exactly 浏览器的输出。这意味着它没有被转换为字节数组（如果我错了请纠正我）我相信这就是为什么它是一个损坏的图像...

我的问题是：

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

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

感谢您的帮助！ :-)

我读过以下*相关*问题（但他们**没有**答案）：
[问题 1][5]、[问题 2][6]，还有**许多**……

Answer 1

我终于自己找到了答案！

我认为问题在于我使用了 e.target.result（用于在前端显示图像）但我不得不使用 JS File object. The standard HTML 5 file input fields return those File objects (as I've read here）。

我现在唯一要做的就是制作一个 FormData object，附加文件 Object，将 FormData 设置为 Body 并设置 Content-Type header就是这样！

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

这些 JS 文件 Object 被 Java 识别为多部分文件：

@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;
}

希望对您有所帮助:)

Java：使用 Java 脚本上传图片 - 文件损坏、损坏或太大

Java: Image upload with JavaScript - File is damaged, corrupted or too large

javascript

java

spring

file-upload

corrupt-data