Question

我正在尝试将图像文件从我的React前端发送到我的express API：

unset GIT_DIR
cd ..
git --work-tree=. --git-dir=.git fetch --tags

当我记录文件时，该文件在chrome控制台中看起来正确：

fetch('http://localhost:4000/upload/', {
  method: 'POST',
  body: this.state.picture[0],
})

但是，当我尝试在后端的请求中记录文件时，根据我的设置方式，我会得到未定义或空的请求对象。

我尝试按照类似的堆栈溢出问题中的建议使用multer，busboy和express-fileupload，但是有相同的问题。

这是我的路由器：

File {name: "31-614x614.jpg", lastModified: 1553111550472, lastModifiedDate: Wed Mar 20 2019 12:52:30 GMT-0700 (Pacific Daylight Time), webkitRelativePath: "", size: 95101, …}

我只是想查看发送文件的控制器：

const Router = require('express').Router();
const imgController = require('./controllers/imgController');

Router.get('/images/', imgController.getImages);
Router.post('/upload/', imgController.postImage);

module.exports = Router;

我确实进入了控制器，但是请求从不包含文件。任何帮助表示赞赏！

Answer 1

您是否尝试过构建formData元素并将其发送？

var input = document.querySelector('input[type="file"]')

var data = new FormData()
data.append('file', input.files[0])
data.append('user', 'hubot')

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

无法使用Fetch从React前端将文件发送到Express 4 API

1 个答案: