2017-08-04 30 views
1

ユーザーが自分のシステムでファイルを選択し、FormDataを使用して別のサーバーにアップロードできるユーザーフォームがあります。それはapiに直接送信をテストするときはうまく動作します。しかし、私はそれを送る前にヘッダーを変更する必要があります。だから私はクライアントアプリケーションのバックエンドに投稿しています。リクエストまたはアキシャルnodejsを持つ別のサーバーにファイルをアップロード

router.post('/upload', function(req, res, next) { 
    //...some axios or request logic 

    var fs = require('fs'); 
    var request = require('request'); 
    var formData = { 
    my_field: 'my_value', 
    my_file: fs.createReadStream(__dirname + '/example.doc'), 
    }; 

    request.post({url:'http://someothereapp/upload-file', formData: formData}, function(err, httpResponse, body) { 
    if (err) { 
     return console.error('upload failed:', err); 
    } 
    console.log('Upload successful! Server responded with:', body); 
    res.send('good!'); 
    }); 

}); 

axiosまたはrequest正規形を投稿したり、要求を取得するための素晴らしい作品。しかし、私はそれを使用してファイルを送信しようとすると動作しません。上記のコードは常に成功を返しますが、ファイルをアップロードしません。だから私はhereに行きましたが、まだ私が逃しているものを見るのに十分理解していません。

テスト中に他のサーバー(ローカル)で認証と追跡を無効にしているので、ヘッダーを変更する必要はありません。それは私がWebフォームから直接ファイルを送信した場合正常に動作し、次のコードを持っている、ではなく、私のクライアント特急アプリから:

// http://someothereapp/upload-file 
    router.post('/upload-file', (req, res, next) => { 
    let multer = require('multer') 
    let p = path.join(__dirname, '../uploads'); 
    let storage = multer.diskStorage({ 
     destination: function(req, file, callback) { 
     callback(null, p) 
     }, 
     filename: function(req, file, callback) { 
     console.log('what is file', file) 
     callback(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname)) 
     } 
    }) 

    let upload = multer({ 
     storage: storage 
    }).single('userFile') 
    upload(req, res, function(err) { 
     res.end('File is uploaded') 
    }) 
    }); 

私はthis問題を見て、それがaxiosとその可能性はない意味かもしれないと思いますあなたはどのようにリクエストしてそれをしていますか?たとえば、post ... uploadコードでは、my_fileをユーザーがフォームで選択したファイルにするにはどうすればよいですか?ファイルをアップロードしていないのになぜ失敗しないのですか?

答えて

1

私は、次のクライアントのバックエンドアプリケーションを変更し、それは私は、ヘッダーを変更し、フォームを送信することができます:

router.post('/upload-file', function(req, res, next) { 
    var httpProxy = require('http-proxy'); 
    var proxy = httpProxy.createProxyServer({headers: customHeader}); 
    proxy.web(req, res, { target: 'http://someothereapp' }, function(e) { 
    // will proxy request to http://someothereapp/upload-file 
    ... 
    }); 
}); 

クライアントフォーム(変わらず):

<form name='uploadfile' enctype="multipart/form-data" method="post"> 
    <input type="file" name="userFile" /> 
    <input type="submit" value="Upload File" name="submit"> 
</form> 


<script> 
var form = document.forms.namedItem("uploadfile"); 
form.addEventListener('submit', function(ev) { 

    var oOutput = document.querySelector("div"), 
     oData = new FormData(form); 

    var oReq = new XMLHttpRequest(); 
    oReq.open("POST", "/upload-file", true); 
    oReq.onload = function(oEvent) { 
    if (oReq.status == 200) { 
     // oOutput.innerHTML = "Uploaded!"; 
     console.log('Uploaded'); 
    } else { 
     console.log('error', oReq.status); 
     // oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>"; 
    } 
    }; 

    oReq.send(oData); 
    ev.preventDefault(); 
}, false); 
</script> 

ターゲットサーバー(変更なし):

関連する問題