Question

使用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

在后路由器上显示“undefined”。

Answer 1

最后我找到了解决方案

我不得不删除＆＃39;内容类型＆＃39;来自header部分，它使用multer在nodejs中解决。

使用＆＃34; multipart / form-data＆＃34;

'Content-Type': 'multipart/form-data'

要求我们设置边界，因此它会在nodejs上抛出错误＆＃34;错误：多部分：未找到边界＆＃34;

使用＆＃34; application / x-www-form-urlencoded＆＃34;

'Content-Type': 'application/x-www-form-urlencoded'

我将req.body填充但是作为字符串但无法访问各个值。

因此，最终解决方案是删除＆＃39; Content-Type＆＃39;

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

1 个答案: