多独立图片上传至Xano API遇400错误：Value is not properly formed求解

一、"Value is not properly formed" 含义 #

这个错误说明Xano接口接收到的image1参数格式不合法，不符合接口要求的file resource类型。大概率是请求的表单数据解析失败，或者参数本身不是有效的文件对象。

二、当前代码的核心问题及修复 #

1. 错误设置Content-Type请求头 #

当使用FormData作为fetch的body时，绝对不要手动设置Content-Type: multipart/form-data。浏览器会自动生成包含正确boundary（表单数据分隔符）的Content-Type，手动设置会丢失boundary，导致服务器无法正确解析表单里的文件和参数。

2. 未处理部分图片未上传的情况 #

如果用户只修改部分图片，比如没选择cardFront，myFile1会是undefined，FormData会把image1参数的值设为字符串"undefined"，而不是跳过该参数，Xano收到非文件类型的参数就会报错。

3. no-cors模式限制调试 #

mode: "no-cors"会让fetch无法读取响应内容，你没法看到Xano返回的详细错误信息，不利于排查问题。

修复后的代码 #

JavaScript部分

// POST IMAGES
const memberID = localStorage.getItem('MemberID');
console.log("Member ID:", memberID); 

const url = 'XANO endpoint';

document.addEventListener('DOMContentLoaded', init);

function init(){
    document.getElementById('btnSubmit').addEventListener('click', upload);
}

function upload(ev){
    ev.preventDefault();    

    // 只设置Accept头，不要手动设置Content-Type
    let h = new Headers();
    h.append("Accept", "application/json");

    // 打包要发送到服务器的文件和数据
    let fd = new FormData();
    fd.append("member-id", memberID);

    // 只添加已选择的文件，避免传入undefined
    const cardFront = document.getElementById('cardFront').files[0];
    if (cardFront) fd.append("image1", cardFront);
    
    const cardBack = document.getElementById('cardBack').files[0];
    if (cardBack) fd.append("image2", cardBack);
    
    const artHeader = document.getElementById('artHeader').files[0];
    if (artHeader) fd.append("image3", artHeader);

    let req = new Request(url, {
        method: "POST",
        headers: h,
        // 去掉no-cors，除非你确定需要跨域限制
        body: fd
    });

    fetch(req)
        .then(async (response)=>{
            // 现在可以获取响应内容，方便调试
            const resData = await response.json();
            if (response.ok) {
                document.getElementById("output").textContent = "图片上传成功";
                console.log("服务器返回:", resData);
            } else {
                document.getElementById("output").textContent = `上传失败: ${resData.message}`;
                console.error("服务器错误:", resData);
            }
        })
        .catch( (err) =>{
            console.log("请求错误:", err.message);
            document.getElementById("output").textContent = "请求失败，请检查网络或接口地址";
        });
}

HTML部分（修正隐藏输入框的模板字符串语法问题）

<form action="#">
        <div>
            <input type="hidden" id="nodes_id" data-name="nodes_id" value="${memberID}"/>
            <input type="file" id="cardFront" accept=".png, .jpg, .jpeg"/>
            <input type="file" id="cardBack" accept=".png, .jpg, .jpeg"/>
            <input type="file" id="artHeader" accept=".png, .jpg, .jpeg"/>
        </div>
        <div>
            <button class="button" id="btnSubmit">Upload Files</button>
        </div>
</form>

三、替代方案（简化版Fetch上传） #

如果想更简洁，也可以直接利用表单元素创建FormData，不需要手动获取每个文件：

function upload(ev){
    ev.preventDefault();    
    const form = ev.target.closest('form');
    const fd = new FormData(form);
    // 添加member-id到FormData
    fd.append("member-id", memberID);

    // 映射输入框ID到接口参数名
    const paramMap = {
        cardFront: "image1",
        cardBack: "image2",
        artHeader: "image3"
    };
    // 先移除所有默认的文件参数，再重新添加已选择的
    Object.values(paramMap).forEach(param => fd.delete(param));
    form.querySelectorAll('input[type="file"]').forEach(input => {
        const file = input.files[0];
        if (file) {
            fd.append(paramMap[input.id], file);
        }
    });

    fetch(url, {
        method: "POST",
        headers: {
            "Accept": "application/json"
        },
        body: fd
    })
    .then(async res => {
        const data = await res.json();
        if (res.ok) {
            alert("上传成功");
        } else {
            alert(`错误: ${data.message}`);
        }
    })
    .catch(err => console.error(err));
}

内容的提问来源于stack exchange，提问作者YesCaptain