上传文件时抓取API和multer错误
我试图使用获取API上传文件到一个node.js服务器(我使用github的pollyfill,如果它与它有关: https : //github.com/github/fetch )。
请求是这样完成的:
const data = new FormData(); data.append('file', file); return fetch(this.concatToUrl(url), { method: 'post', headers: Object.assign({}, this.getHeaders(), {'Content-Type': 'multipart/form-data'}), body: data, });
在服务器端,我有这个路由的声明:
app.post('/media', upload.single('file'), mediaRoutes.postMedia);
并试图获得这样的文件:
exports.postMedia = function(req, res) { console.log('req.file', req.file, req.files, req.body); return res.sendStatus(200); }
但req.file
没有被填充。
另外,我从expression方面得到这个错误:
Error: Multipart: Boundary not found [2] at new Multipart (/Users/jmanzano/Development/web/test/node_modules/busboy/lib/types/multipart.js:58:11) [2] at Multipart (/Users/jmanzano/Development/web/test/node_modules/busboy/lib/types/multipart.js:26:12) [2] at Busboy.parseHeaders (/Users/jmanzano/Development/web/test/node_modules/busboy/lib/main.js:64:22) [2] at new Busboy (/Users/jmanzano/Development/web/test/node_modules/busboy/lib/main.js:21:10) [2] at multerMiddleware (/Users/jmanzano/Development/web/test/node_modules/multer/lib/make-middleware.js:32:16) [2] at Layer.handle [as handle_request] (/Users/jmanzano/Development/web/test/node_modules/express/lib/router/layer.js:95:5) [2] at next (/Users/jmanzano/Development/web/test/node_modules/express/lib/router/route.js:131:13) [2] at Route.dispatch (/Users/jmanzano/Development/web/test/node_modules/express/lib/router/route.js:112:3) [2] at Layer.handle [as handle_request] (/Users/jmanzano/Development/web/test/node_modules/express/lib/router/layer.js:95:5) [2] at /Users/jmanzano/Development/web/test/node_modules/express/lib/router/index.js:277:22 [2] at Function.process_params (/Users/jmanzano/Development/web/test/node_modules/express/lib/router/index.js:330:12) [2] at next (/Users/jmanzano/Development/web/test/node_modules/express/lib/router/index.js:271:10) [2] at cors (/Users/jmanzano/Development/web/test/node_modules/cors/lib/index.js:178:7) [2] at /Users/jmanzano/Development/web/test/node_modules/cors/lib/index.js:228:17 [2] at originCallback (/Users/jmanzano/Development/web/test/node_modules/cors/lib/index.js:217:15) [2] at /Users/jmanzano/Development/web/test/node_modules/cors/lib/index.js:222:13 [2] at optionsCallback (/Users/jmanzano/Development/web/test/node_modules/cors/lib/index.js:203:9) [2] at /Users/jmanzano/Development/web/test/node_modules/cors/lib/index.js:208:7 [2] at Layer.handle [as handle_request] (/Users/jmanzano/Development/web/test/node_modules/express/lib/router/layer.js:95:5) [2] at trim_prefix (/Users/jmanzano/Development/web/test/node_modules/express/lib/router/index.js:312:13) [2] at /Users/jmanzano/Development/web/test/node_modules/express/lib/router/index.js:280:7 [2] at Function.process_params (/Users/jmanzano/Development/web/test/node_modules/express/lib/router/index.js:330:12)
这是通过中间件的configuration:
app.use(bodyParser.urlencoded({extended: true})); app.use(bodyParser.json()); app.use(expressValidator()); app.use(logger('dev')); app.use(cookieParser()); app.use(methodOverride()); app.use(passport.initialize()); app.use(passport.session()); app.set('JWTSuperSecret', jwtConfig.secret); if (process.env.NODE_ENV !== 'production') { app.use(cors()); }
此外,这与POSTMAN正确地工作。 所以,我觉得我在做这个请求时做错了什么。
谢谢!
对于那些在使用邮差时遇到错误的人来说,请确保在头文件中不指定内容types 。
没有必要分配一个头{Content-Type': 'multipart/form-data'}
:浏览器替代它自己的。
但是如果你暴露它,那么在content-type:multipart/form-data; boundary=...
之后没有指定boundary
content-type:multipart/form-data; boundary=...
content-type:multipart/form-data; boundary=...
在Request Headers
Request Payload
之前的Request Headers
,并在服务器端导致错误。
如果您打开浏览器控制台并看到标题,将会看到。
所以就:
fetch(this.concatToUrl(url), { method: 'post', body: data, });
或者,如果你需要自定义标题,你可以像这样添加它们:
var headers = Object.assign({}, {'content-type': 'application/json'}, this.getHeaders(), {'Content-Type': 'multipart/form-data'} ); // Removal should be case insensitive, or in any case, the header will be included: Object.keys(headers) .forEach( function(k) { if (k.toLowerCase()==='content-type') delete headers[k] }) const data = new FormData(); data.append('file', file); return fetch(this.concatToUrl(url), { method: 'post', headers: headers, body: data, });