代码之家  ›  专栏  ›  技术社区  ›  Mario

如果对象的某个属性的值必须是文件,那么发送对象数组的正确方法是什么?

  •  0
  • Mario  · 技术社区  · 5 年前

    我试图将一组对象上传到后端,这些对象的形式如下:, {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);
    }
    

    getFileMeta

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

    E

    1 回复  |  直到 5 年前
        1
  •  0
  •   Jonathon Hibbard    5 年前

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

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