NodeJS 在reactJS中使用“fetch”上传文件

wixjitnu 于 2023-05-06 发布在 Node.js

关注(0)|答案(2)|浏览(179)

在reactjs中使用“fetch”上传文件
我正在尝试使用ReactJS上传文件。

handleUploadfile = (event) => {
        event.preventDefault();
        const data = new FormData();
        data.append('photo',event.target.files[0] );
        data.append('name', 'Test Name');
        data.append('desc', 'Test description');
        fetch("http://localhost:3001/todo/upload", {
             method: 'POST',
             headers: {
                 'Accept': 'application/json',
                 'Content-Type': 'application/x-www-form-urlencoded'
             },
             body: data
        }).then((response) =>  {
           return response.text();
        })
    }

由于某些原因，我无法使用nodejs（+multer）服务器读取文件：
req.files
这在后路由器处显示“未定义”。

node.js

来源：https://stackoverflow.com/questions/49686694/uploading-a-file-using-fetch-in-reactjs

2条答案

按热度按时间

cngwdvgl1#

最后我找到了解决办法
我不得不从headers部分删除'Content-Type'，并使用multer在nodejs中解决了这个问题。
使用“multipart/form-data”
'Content-Type': 'multipart/form-data'
需要我们设置边界，因此它会在nodejs上抛出错误“Error：多部分：未找到边界”
使用“application/x-www-form-urlencoded”
'Content-Type': 'application/x-www-form-urlencoded'
我得到的req.body填充，但作为字符串，但无法访问的个别值。
因此，最终的解决方案是删除“内容类型”

赞(0）回复(0）举报 2023-05-06

kkbh8khc2#

我上传Excel文件，并将其传递给获取方法，并按照我预期的方式工作

const formData = new FormData()
            formData.append('file', payload)

            const createXHR = () => new XMLHttpRequest()

            fetch('https://localhost:8080/file/', {
                body: formData,
                createXHR,
                method: 'POST'
            }).then(response => {
                return response.json()
            }).then(res => {
                console.log(res, 'res')
            })

赞(0）回复(0）举报 2023-05-06

我来回答

NodeJS 在reactJS中使用“fetch”上传文件

2条答案

相关问题

热门标签

最新问答