Fetch API und Multer Fehler beim Hochladen von Datei

Question

Ich versuche fetch API zu verwenden, um Dateien auf einen node.js Server hochzuladen (Ich benutze Github Pollyfill, wenn es etwas damit zu tun hat: 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, 
}); 

Auf der Serverseite Ich habe diese Erklärung der Route:

wird die Anfrage so gemacht

app.post('/media', upload.single('file'), mediaRoutes.postMedia); 

Und versucht, die Datei wie folgt zu erhalten:

exports.postMedia = function(req, res) { 
    console.log('req.file', req.file, req.files, req.body); 
    return res.sendStatus(200); 
} 

Aber req.file wird nicht gefüllt.

Auch ich erhalte diesen Fehler von express Seite:

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) 

Und dies ist die Konfiguration über Middle:

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()); 
} 

Auch dies korrekt mit POSTMAN arbeitet. Also, ich denke, ich mache etwas falsch mit der Anfrage.

Danke!

Answer 1

Es ist nicht notwendig, eine Kopfzeile {Content-Type': 'multipart/form-data'} zuzuordnen: der Browser ersetzt seinen eigenen.

Aber wenn man es aussetzen, dann ist es nicht boundary nach content-type:multipart/form-data; boundary=... in Request Headers vor Request Payload angegeben und das verursacht den Fehler auf der Server-Seite.

Wenn Sie die Browserkonsole öffnen und die Header sehen, wird es angezeigt.

Also, einfach:

fetch(this.concatToUrl(url), { 
    method: 'post', 
    body: data, 
}); 

Oder, wenn Sie benutzerdefinierte Header benötigen, können Sie sie wie folgt hinzu:

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, 
}); 

Answer 2

Für jene auf diesen Beitrag zu stolpern, die den Fehler haben wenn Postbote mit stellen Sie sicher, dass nicht den Inhaltstyp in den Headern angeben.