Multer npmモジュールを使用して、アプリにファイルをアップロードしています。
私が定義したmulter関数は、単一のファイルをファイルシステムにアップロードできるようにすることです。すべてが実行時に機能します。問題は、ファイルをアップロードした後、以下のエラーが表示されることです。見どころについてのアドバイスはありがたい。
Unexpected field
Error: Unexpected field
at makeError (c:\Users\Dev\WebstormProjects\Crunch\node_modules\multer\lib\make-error.js:12:13)
at wrappedFileFilter (c:\Users\Dev\WebstormProjects\Crunch\node_modules\multer\index.js:39:19)
at Busboy.<anonymous> (c:\Users\Dev\WebstormProjects\Crunch\node_modules\multer\lib\make-middleware.js:97:7)
at Busboy.emit (events.js:118:17)
at Busboy.emit (c:\Users\Dev\WebstormProjects\Crunch\node_modules\multer\node_modules\busboy\lib\main.js:31:35)
at PartStream.<anonymous> (c:\Users\Dev\WebstormProjects\Crunch\node_modules\multer\node_modules\busboy\lib\types\multipart.js:205:13)
at PartStream.emit (events.js:107:17)
at HeaderParser.<anonymous> (c:\Users\Dev\WebstormProjects\Crunch\node_modules\multer\node_modules\busboy\node_modules\dicer\lib\Dicer.js:51:16)
at HeaderParser.emit (events.js:107:17)
at HeaderParser._finish (c:\Users\Dev\WebstormProjects\Crunch\node_modules\multer\node_modules\busboy\node_modules\dicer\lib\HeaderParser.js:70:8)
var multer = require('multer');
var app = express();
var fs = require('fs');
//. . .
var upload = multer({ dest: 'upload/'});
var type = upload.single('file');
app.post('/upload', type, function (req,res) {
var tmp_path = req.files.recfile.path;
var target_path = 'uploads/' + req.files.recfile.name;
fs.readFile(tmp_path, function(err, data)
{
fs.writeFile(target_path, data, function (err)
{
res.render('complete');
})
});
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name='recfile' placeholder="Select file"/>
<br/>
<button>Upload</button>
</form>
#Package.json
"dependencies": {
"body-parser": "~1.13.2",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"easy-Zip": "0.0.4",
"express": "~4.13.1",
"hbs": "~3.1.0",
"less-middleware": "1.0.x",
"morgan": "~1.6.1",
"multer": "~1.0.0",
"serve-favicon": "~2.3.0"
}
}
Name属性を持つtype =ファイルが
upload.single('attr')
で渡されるパラメーター名と同じであることを確認する必要があります
var multer = require('multer');
var upload = multer({ dest: 'upload/'});
var fs = require('fs');
/** Permissible loading a single file,
the value of the attribute "name" in the form of "recfile". **/
var type = upload.single('recfile');
app.post('/upload', type, function (req,res) {
/** When using the "single"
data come in "req.file" regardless of the attribute "name". **/
var tmp_path = req.file.path;
/** The original name of the uploaded file
stored in the variable "originalname". **/
var target_path = 'uploads/' + req.file.originalname;
/** A better way to copy the uploaded file. **/
var src = fs.createReadStream(tmp_path);
var dest = fs.createWriteStream(target_path);
src.pipe(dest);
src.on('end', function() { res.render('complete'); });
src.on('error', function(err) { res.render('error'); });
});
Multerのupload.single(<NAME>)
関数で使用する<NAME>
は、<input type="file" name="<NAME>" ...>
で使用するものと同じでなければなりません。
だからあなたは変える必要がある
var type = upload.single('file')
に
var type = upload.single('recfile')
あなたのapp.js
お役に立てれば。
Vincentの回答のフォローアップ。
質問はフォームを使用しているため、質問に対する直接的な回答ではありません。
私にとっては、使用された入力タグの名前ではなく、ファイルをformDataに追加するときの名前でした。
フロントエンドファイル
var formData = new FormData();
formData.append('<NAME>',this.new_attachments)
webサービスファイル:
app.post('/upload', upload.single('<NAME>'),...
あなたが使用できるApi用
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
var multer = require('multer');
const port = 8000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.listen(port, ()=>{
console.log('We are live on' + port);
});
var upload = multer({dest:'./upload/'});
app.post('/post', upload.single('file'), function(req, res) {
console.log(req.file);
res.send("file saved on server");
});
これはPostmanでも使用できますが、ファイルに.jpg拡張子が付いていません。以下にコメントするように
これは、拡張子のないファイルをアップロードする場合のmulterのデフォルト機能ですが、ファイルオブジェクトを提供し、これを使用してファイルの拡張子を更新できます。
var filename = req.file.filename;
var mimetype = req.file.mimetype;
mimetype = mimetype.split("/");
var filetype = mimetype[1];
var old_file = configUploading.settings.rootPathTmp+filename;
var new_file = configUploading.settings.rootPathTmp+filename+'.'+filetype;
rname(old_file,new_file);
2つの画像がアップロードされているので! 1つはファイル拡張子付きで、もう1つは拡張子なしのファイルです。 tmp_path(拡張子のないファイル)を削除するには
後src.pipe(dest);
以下のコードを追加
fs.unlink(tmp_path); //deleting the tmp_path
残念ながら、エラーメッセージは実際の問題が何であるかについて明確な情報を提供しません。そのためには、いくつかのデバッグが必要です。
スタックトレースから、multer
パッケージのエラーの原因を以下に示します。
function wrappedFileFilter (req, file, cb) {
if ((filesLeft[file.fieldname] || 0) <= 0) {
return cb(makeError('LIMIT_UNEXPECTED_FILE', file.fieldname))
}
filesLeft[file.fieldname] -= 1
fileFilter(req, file, cb)
}
そして、ここで適用される奇妙な(おそらく誤った)翻訳は、メッセージ自体のソースです...
'LIMIT_UNEXPECTED_FILE': 'Unexpected field'
filesLeft
は、サーバーが期待するフィールドの名前を含むオブジェクトであり、file.fieldname
は、クライアントが提供するフィールドの名前を含みます。クライアントが提供するフィールド名とサーバーが期待するフィールド名との間に不一致がある場合、エラーがスローされます。
解決策は、名前を変更することですクライアントまたはサーバーのいずれかで 2つが同意するように。
たとえば、クライアントでfetch
を使用する場合...
var theinput = document.getElementById('myfileinput')
var data = new FormData()
data.append('myfile',theinput.files[0])
fetch( "/upload", { method:"POST", body:data } )
そして、サーバーには次のようなルートがあります...
app.post('/upload', multer(multerConfig).single('myfile'),function(req, res){
res.sendStatus(200)
}
(この例では)myfile
が共通名であることに注意してください。
私のシナリオでは、swagger.yaml
のパラメーターの名前を変更しましたが、ドキュメントページをリロードしなかったため、これが発生していました。
したがって、予期しない入力パラメーターでAPIを試していました。
長い話、 F5 私の友達です。
おそらく、あなたはupload.single('file')
で言及したのと同じ名前を与えていないでしょう。