Svelte使用input上传文件时fetch POST请求的body应如何设置

你之前的写法不生效是因为File是浏览器宿主对象，无法被JSON.stringify正常序列化，序列化后只会得到空对象，自然无法被后端识别。

正确的做法是使用FormData接口封装上传文件，修改后的handleChange代码如下：

function handleChange(e) {
    files = Array.from(e.target.files);
    const formData = new FormData();
    // 遍历所有文件添加到FormData中，key名可以和后端约定，多文件场景建议加[]后缀
    files.forEach((file, index) => {
        formData.append('files[]', file);
        // 如果后端要求单文件对应单独key，也可以用类似 `file_${index}` 作为key
    });
    fetch("你的后端接口地址", {
        method: "POST",
        body: formData
        // 不要手动设置Content-Type请求头，浏览器会自动生成带boundary的multipart/form-data头
    }).then(res => res.json())
    .then(data => {
        // 处理后端返回结果
    })
}

如果你的后端只接收单文件，直接append单个文件即可：formData.append('file', files[0])。

后端可以通过解析multipart/form-data格式的请求获取文件内容，不同后端框架都有对应的解析工具，比如Node.js生态的multer、SpringBoot的MultipartFile等。

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