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

Question

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

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

我的问题是：

• 有什么问题？
• 我该如何解决？

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

谢谢你的帮助！:-)

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

Answer 1

我终于自己找到了答案！

我认为问题是我使用了e.target.result（用于在前端显示图像），但安装后我必须使用JS File 对象。标准 HTML 5 文件输入字段返回那些 File 对象（正如我在此处阅读的那样）。

我现在唯一要做的就是创建一个 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 识别为多部分文件：

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

我希望这是有帮助的 ：）