web-dev-qa-db-ja.com

Node.js multerエラー：予期しないフィールド

Node.jsmulterに問題があります...

この問題の原因を知りたいのですが。クライアントとnode.jsのmulterupload.single('streamfile')の間にinput[name=streamfile]の正しい名前を設定したと思います。

他にどのような要素がこの問題を引き起こしているのかわかりません。

これが私のコードです。ありがとう。

エラーメッセージ

Error: Unexpected field
    at makeError (/Users/taeseongpark/Documents/Study/NodeJS/node_basic_test/node_modules/multer/lib/make-error.js:12:13)
    at wrappedFileFilter (/Users/taeseongpark/Documents/Study/NodeJS/node_basic_test/node_modules/multer/index.js:40:19)
    at Busboy.<anonymous> (/Users/taeseongpark/Documents/Study/NodeJS/node_basic_test/node_modules/multer/lib/make-middleware.js:114:7)
    at emitMany (events.js:127:13)
    at Busboy.emit (events.js:201:7)
    at Busboy.emit (/Users/taeseongpark/Documents/Study/NodeJS/node_basic_test/node_modules/busboy/lib/main.js:38:33)
    at PartStream.<anonymous> (/Users/taeseongpark/Documents/Study/NodeJS/node_basic_test/node_modules/busboy/lib/types/multipart.js:213:13)
    at emitOne (events.js:96:13)
    at PartStream.emit (events.js:188:7)
    at HeaderParser.<anonymous> (/Users/taeseongpark/Documents/Study/NodeJS/node_basic_test/node_modules/dicer/lib/Dicer.js:51:16)

クライアントHTML

<form action="http://localhost:8989/fileupload" method="post" enctype="multipart/form-data">
    <input type="file" name="streamfile">
    <input type="button" data-inline="true" value="Input" id="filesubmit">
</form>
<script lang="javascript">
    $('form #filesubmit').on('click', (e)=>{
        var uploadfile = $("input[name=streamfile]")[0].files[0];
        var formData = new FormData(); 
        formData.append("myfile", uploadfile);

        console.log('uploadfile', uploadfile, uploadfile.type);

        var localurl = 'http://localhost:8989/fileupload'
        $.ajax({ 
            url: localurl,  // googleCloud
            data: formData, 
            processData: false, 
            contentType: false, 
            type: 'POST', 
            success: function(data){ 
                console.log('response data', data);
            } 
        });
    });
</script>

Node.jsサーバー

var express = require('express')
var multer  = require('multer')
var upload = multer({ dest: 'uploads/' })

var app = express()

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", 'Content-Type, Authorization, Content-Length, X-Requested-With');
    res.header("Access-Control-Allow-Methods", "PUT, POST, GET, OPTIONS, DELETE");
    next();
});

app.post('/fileupload', upload.single('streamfile'), function (req, res) {
    console.log('req.file', req.file);
  // req.file is the `avatar` file 
  // req.body will hold the text fields, if there were any 
})

// Connect to Web Server
var port = '8989';
app.listen(port, () => {
    console.log('[Express] fileupload started at %d port', port);
});
// "express": "^4.16.2", "multer": "^1.3.0",
node.jsfile-uploadmulter
4
geoseong

割り当てられたformData.append フィールド名は、Multerに設定されたサーバーの予想されるフィールド名と一致する必要があります。

formData.append("streamfile", uploadfile);
15
Scriptonomy

hTMLの次のコードを試してくださいすべてのJavaScriptコードを削除してください

<form action="http://localhost:8989/fileupload" method="post" enctype="multipart/form-data">
        <input type="file" name="streamfile">
        <input type="submit" data-inline="true" value="Input" id="filesubmit">
    </form>
2
Hemant Rajpoot