web-dev-qa-db-ja.com

Fetch APIとファイルのアップロード中のマルチエラー

Fetch 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は入力されていません。

また、私はエクスプレス側からこのエラーを受け取っています：

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)

そしてこれはミドルウェア経由の設定です：

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で正しく動作しています。だから、私はリクエストで何か間違っていると思います。

ありがとう！

node.jsformsexpressmultipartform-data
11
Javier Manzano

postmanを使用する場合エラーがあるこの投稿を偶然見つけた人は、ヘッダーでcontent-typeを指定しないを確認してください。

15
mezod

ヘッダー{Content-Type': 'multipart/form-data'}を割り当てる必要はありません。ブラウザが独自のものに置き換えます。

しかし、それを公開する場合、content-type:multipart/form-data; boundary=...の前のRequest Headersの前でRequest Payloadの後にboundaryが指定されていないため、サーバー側でエラーが発生しています。

ブラウザコンソールを開いてヘッダーを表示すると、表示されます。

これだけ：

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