时间戳

首页 > 解决方案 > 使用 Fetch 发送文件和数据

javascript - 使用 Fetch 发送文件和数据

问题描述

我有一个反应应用程序。我的申请状态如下

const [book, setBook] = useState({
    title: '',
    cover: {}
    numberPages: 0,
    resume: '',
    date: date,
});

封面道具包含一个文件。当我尝试将状态转换为 json (JSON.stringify(book)) 以使用 FETCH 发送时，封面属性是一个空对象。如何正确发送此信息？

我的提交活动表格

 let handleForm = (e) => {

    data = JSON.stringify(book);

    let info = {
        method: 'POST',
        body: data,
        headers: { 
            'X-CSRF-TOKEN': header,
            "Content-Type": "application/json",
            "Accept": "application/json, text-plain, */*"
         }
    }

    fetch('/books/add', info)
        .then(response => response.json())
        .then(result => console.log(result))
        .catch(error => console.log(error));

    e.preventDefault();
}

标签： javascriptjsonreactjs

解决方案

当您在 fetch 中发送文件时，请确保您使用 formdata

var data = new FormData()
data.append('title', book.title)
data.append('cover', book.cover)

fetch('/', {
  method: 'POST',
  body: data
})

希望它有效。如果不是，请在您进行 api 调用的地方评论您的代码

推荐阅读