时间戳

首页 > 解决方案 > 发送对象数组的正确方法是什么，其中对象的一个​​属性的值必须是文件？

javascript - 发送对象数组的正确方法是什么，其中对象的一个​​属性的值必须是文件？

问题描述

我正在尝试将一组对象上传到后端，这些对象具有以下形式，{name: string, date: string, file: File}. 使用 Fetch API 发送对象数组的正确方法是什么，其中对象的属性之一的值必须是文件？

async function onSubmit(event) {
    event.preventDefault();

    const files = Array.from(event.target.file.files);
    const validFiles = getOnlyValidFiles(files);

    if (!files.length || !validFiles.length) {
        console.log("No data to submit");

        return;
    }

    const data = validFiles.map(getFileMeta);
    const response = await fetch("/api/v1/upload/files", {
        method: "POST",
        headers: {
            "Content-Type": "application/json;charset=utf-8",
        },
        body: JSON.stringify(data),
    });
    const json = await response.json();

    console.log(json);
}

获取文件元

function getFileMeta(file) {
    let [article, date] = file.name.split("_");

    date = date.split(".")[0]; // exclude .pdf

    const formData = new FormData();

    formData.append("file", file);

    return {
        article,
        reception,
        file: formData,
    };
}

乙

标签： javascript

解决方案

您不能通过 JSON 发送内容类型为 text/json 的文件。你可以序列化它虽然我猜这可能会让你更接近，但你会想要使用FormData（并将每个文件和内容附加到数组中）。我想您可以使用引用指针并尝试在 JSON 对象本身中引用文件，但我怀疑这实际上会起作用（除非您有办法将 JSON 对象解析为后端的 JS 对象以获取该引用返回- 我想这会起作用吗？）。无论哪种方式，您都需要多部分表单内容类型来发送此文件。

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#uploading_a_file

推荐阅读