带有文件的表单-上传到 Json-字符串到 JavaBackend

Posted 2023-05-09

【中文标题】带有文件的表单-上传到 Json-字符串到 JavaBackend

【英文标题】：Form with File- Upload to Json- String to JavaBackend

【发布时间】：2019-06-25 06:15:44

【问题描述】：

我有一个 html 表单，我将其解析为 json 并将其发送到我的 java 后端。

        var data = ;
        var formArray = $("#form").serializeArray();
        $.each(formArray, function (i, field) 
            if(field.name !== '') 
                data[field.name] = field.value;
            
        );

        $.ajax(
            type: "POST",
            url: encodedContextPath + "/form/send",
            data: JSON.stringify(data),
            dataType: "json",
            contentType: 'application/json'
            ........

现在我需要添加上传 pdf 文件的功能，如何将此文件放入我的 json 中，然后发送到后端？ 我可以以某种方式对其进行序列化或生成可以放入 json 的数据流吗？

【问题讨论】：

pdf file upload ajax html的可能重复

【参考方案1】：

您可以使用 FileReader 获取 pdf 文件的数据并以 json 格式发送。

let pdfFile;
$('<file-input-id-or-class>').on('change', onPdfUpload);

function onPdfUpload($event) 
    let file = $event.target.files[0];
    if (!file) return;

    let reader = new FileReader();
    reader.onload = function (e) 
        pdfFile = reader.result;
    ;
    reader.readAsDataURL(file);



var data = ;
    var formArray = $("#form").serializeArray();
    $.each(formArray, function (i, field) 
        if(field.name !== '') 
            data[field.name] = field.value;
        
    );

   data.pdfFileContent = pdfFile;// you can change field name accordingly

    $.ajax(
        type: "POST",
        url: encodedContextPath + "/form/send",
        data: JSON.stringify(data),
        dataType: "json",
        contentType: 'application/json'

【讨论】：

我设法将文件发送到我的后端，但现在我正在努力从 base64 字符串中取回数据

要显示来自 Base64 的 PDF，您可以检查：***.com/questions/40674532/…