我怎样才能从浏览器发送一个大文件到Node.js服务器？
我试图使用data: URL从客户端发送到服务器的图像。 我读取上传的图像并将数据发送到服务器的function非常简单：
getTags = event => { const file = event.target.files[0]; if (!file.type.match('image.*')) { return; } const reader = new FileReader(); reader.onload = (theFile => { return (e) => { this.sendDataToServer(e.target.result, theFile.type); }; })(file); reader.readAsDataURL(file); } sendDataToServer = (data, fileType) => { const options = { method: 'POST', headers: { 'Content-Type': fileType, }, body: JSON.stringify({data}), cache: 'default' } fetch('http://localhost:5000/img', options) .then(res => res.text()) .then(body => { console.log(body); }); }
如果我把它打印到sendDataToServer之前打印e.target.result ，我看到一个有效的data: URL 。
所以，我的服务器：
const app = express(); app.use(cors()); app.use(helmet()); app.use(bodyParser.urlencoded({extended: false})); app.use(bodyParser.json()); app.post('/img', (req, res, next) => { const data = decodeURIComponent(req.body.data); console.log(data); // ...
但在“networking”选项卡中的“Chrome开发工具”中，我看到：
Request URL:http://localhost:5000/img Request Method:OPTIONS Status Code:204 No Content Remote Address:52.15.183.149:80 Response Headers view source Access-Control-Allow-Headers:content-type Access-Control-Allow-Methods:GET,HEAD,PUT,PATCH,POST,DELETE Access-Control-Allow-Origin:* Date:Sat, 25 Mar 2017 20:18:09 GMT X-Powered-By:Express Request Headers view source Accept:*/* Accept-Encoding:gzip, deflate, sdch Accept-Language:en-GB,en-US;q=0.8,en;q=0.6 Access-Control-Request-Headers:content-type Access-Control-Request-Method:POST Connection:keep-alive DNT:1 Host:b580f823.ngrok.io Origin:http://localhost:3000 Referer:http://localhost:3000/ User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36 OPR/43.0.2442.1165
在服务器上我的console.log只是打印undefined 。 不明白为什么发生了。 我的错误在哪里？
显示客户端信息的问题中的所有内容都表示在客户端工作正常。
所以好像在服务器端一定有一些问题不是由于客户端错误造成的。
我这样说是因为：
-
请求的devtools片断显示了
Request Method:OPTIONS， 这是因为你的POST有一个除application/x-www-form-urlencoded，multipart/form-data或text/plain之外的Content-Type头。 -
在这种情况下，您的浏览器首先发送一个CORS预检
OPTIONS请求，并期望得到一个Access-Control-Allow-Headers:content-type响应头和一个Access-Control-Allow-Methods包括POST和Access-Control-Allow-Origin。 -
问题中的devtools代码片断显示所有这些都是预期的，所以它应该发送实际的
POST。 您不会显示该POST的devtools片段，但是如果您的浏览器没有执行实际的POST，则会loggingdevtools控制台的某种错误。
所以，除非我错过了一些东西，否则客户端代码中没有任何错误，因此在服务器端必须有一些问题导致失败。