您如何将文件编码为base64，然后使用JS作为多部分文件上传到后端api？

Question

我正在尝试开发一种微服务来接收base64编码的数据。当我尝试通过6 MB的数据发送数据时，出现以下错误-

多部分请求的参数化数据（不包括上传的文件）超出了在关联的连接器上设置的maxPostSize限制

@RequestMapping(value = "/base64/upload", method = RequestMethod.POST,
                    consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public String base64(@RequestParam("file") String file) {

        System.out.println(file);
        return "done";
    }

我的应用程序属性：

#http://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#common-application-properties
#search multipart
spring.http.multipart.max-file-size=200MB
spring.http.multipart.max-request-size=100MB

因此，我阅读了其他文章，并将以上REST API更改为以下内容-

@RequestMapping(value = "/base64/uploadFile", method = RequestMethod.POST,
            consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public String base64(@RequestParam("file") MultipartFile file) {

        if (file.isEmpty()) {
            return "redirect:uploadStatus";
        }else {
            return "redirect:success";
        }
}

现在如何从前端应用程序（反应应用程序）将转换后的base64数据作为文件上传？

     function getBase64(file) {
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                console.log(reader.result); // file content is converted to base64

                makeRequest(reader.result,file);
            };
            reader.onerror = function (error) {
                console.log('Error: ', error);
            };
        }

在发出请求时，如何将其作为文件发送？如何在JS或React中创建一个新文件？

      function makeRequest(base64data, actualFile) {

            var data = new FormData();
            // data.append("file", actualFile); // works

            data.append("file", base64data); // doesn't works  ???


            var xhr = new XMLHttpRequest();
            xhr.withCredentials = true;

            xhr.addEventListener("readystatechange", function () {
                if (this.readyState === 4) {
                    console.log(this.responseText);
                }
            });

            xhr.open("POST", "http://localhost:8080/base64/uploadFile");
            xhr.send(data);

        }

Answer 1

将 read.result 转换为 buffer 是我能想到的唯一方法。请看下面的代码：

const buffer = Buffer.from(base64data, 'base64');

将 read.result 转换为 buffer 后，可以通过简单的方式手动创建多部分 post 请求：

const formData = new FormData();
formData.append("myFile", buffer, { filename: 'tmp' });

然后发送 formData，而不是发送数据。

我希望这个解决方案可以解决您的问题，这里待处理的部分是使用 Buffer 并附加到表单来发送文件多数据。

注意：你可以通过var改变const。参考：

NodeJS：如何将base64编码的字符串解码回二进制？

Nodejs 将 base64 字符串作为表单数据发布