0

filefieldExtJS を使用して画像ファイルをアップロードし、formサーバー側 (「Express」) に送信しようとしています。以下にコードを貼り付けました。

req.body の API を参照してみましたreq.bodyが、常にundefinedです。どこが間違っているのか教えてください。 Ext JS コード

 {
    xtype: 'form',
    name:'imageForm',
    items:[{
            xtype:'textfield',
            name:'name',
            value:'Krisna'
        },{
            xtype: 'filefield',
            hidden: false,
            buttonOnly:true,
            buttonText:'Change Photo',
            name: 'imageUrl',
            //bind: '{currentContact.imageUrl}',
            listeners:{
                change:function(fielField, value){
                    var filePath = value;
                    fileNameIndex = filePath.lastIndexOf("\\");
                    fileName = filePath.substring(fileNameIndex + 1);
                    fileExt = fileName.substring(fileName.lastIndexOf(".") + 1);
                    var form = this.up('form').getForm(); // working
                    if(fileExt === 'jpeg' || fileExt === 'jpg' || fileExt === 'gif' || fileExt === 'png'){
                        if (form.isValid()) {
                            form.headers = {
                                'Content-Type' : 'application/json;charset=utf-8',
                                "Accept" : "application/json;charset=utf-8"
                            };
                            form.submit({
                                url : 'http://localhost:3000/changePhoto',
                                waitMsg : 'Uploading your Photo...',
                                success : function (fp, o) {
                                    Ext.Msg.alert('Success', 'Your Photo has been uploaded.');
                                    //Write code here to set the server side image url so that that image gets displayed , but not as fakepath.
                                },
                                failure : function (fp, o) {
                                    Ext.Msg.alert('Failed', 'Your Photo failed to uploaded.');
                                }
                            });
                        }
                    }
                    else if(value){
                        //showOKInfoMsg(SWP_Msg.SWP_CompressFileFrmtMsg);
                        Ext.Msg.alert('Warning', 'Please select Image file only');
                        this.reset();
                        return true;
                    }
                }
            }
    }]
}

エクスプレス コード: index.js: 

var express = require('express');
var router = express.Router();

var bodyParser = require('body-parser');
router.use(bodyParser.json()); // for parsing application/json
router.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded

//var multer  = require('multer');    // tried using multer, but I think this is only for file upload not form submit
//var temp = multer();          

//router.use(bodyParser());
//router.use(multer()); // If I try adding multer at this line it is throwing error 

router.post('/changePhoto',  function (req, res) {
  console.log(req.body);  // Outputting {} i.e., empty object

  var userName = req.body.name; // coming undefined as req.body is undefined
  res.json(req.body); // sending back {}
});

module.exports = router;

注: Express のバージョン: "express": "~4.13.1"

エクスプレス 4x API

4

1 に答える 1

0

これが最善の方法かどうかはわかりませんが、次の手順でうまくいきます!

mkdir fileuploaderwebapp && cd fileuploaderwebapp && vi package.json

以下を貼り付けます

{
  "name": "uploader",
  "version": "0.0.1",
  "dependencies": {
    "express": "~4.10.2",
    "multer": "~0.1.6"
  }
}

パッケージ ファイルを保存する

npm install

vi uploader.js

/*Define dependencies.*/

var express=require("express");
var multer  = require('multer');
var app=express();
var done=false;

/*Configure the multer.*/

app.use(multer({ dest: './uploads/',
 rename: function (fieldname, filename) {
    return filename+Date.now();
  },
onFileUploadStart: function (file) {
  console.log(file.originalname + ' is starting ...')
},
onFileUploadComplete: function (file) {
  console.log(file.fieldname + ' uploaded to  ' + file.path)
  done=true;
}
}));

/*Handling routes.*/

app.get('/',function(req,res){
      res.sendfile("uploadmain.html");
});

app.post('/api/fileuploader',function(req,res){
  if(done==true){
    console.log(req.files);
    res.end("File uploaded.");
  }
});

/*Run the server.*/
app.listen(8097,function(){
    console.log("Working on port 8097");
});

ファイル uploader.js を保存します。

vi uploadmain.html

<form id        =  "multipartform"
     enctype   =  "multipart/form-data"
     action    =  "/api/fileuploader"
     method    =  "post"
>
<input type="file" name="filecomp" />
<input type="submit" value="Upload" name="submit">
</form>

node uploader.js

http://localhost:8097/ を参照

于 2015-08-17T07:55:33.193 に答える