如何將文件編碼為base64，然后使用JS將其作為multipart文件上傳到后端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

所以我讀了其他帖子並將上面的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);
            };
        }

在make請求中，如何將其作為文件發送？ 如何在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轉換為緩沖區是我能想到的唯一方法。 請參閱以下代碼：

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

將read.result轉換為緩沖區后，可以通過簡單的方式手動創建multipart post請求：

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

然后發送formData而不是發送數據。

我希望這個解決方案能解決你的問題，這里的待處理部分是使用Buffer並附加到表單來發送你的文件多數據。

注意：您可以通過var更改const。 參考文獻：

NodeJS：如何將base64編碼的字符串解碼回二進制？

Nodejs將base64字符串作為表單數據發布