2016-10-21 6 views
2

私はプログラミングが比較的新しいですが、できるだけ簡潔にするようにしていきます。Multerを使用してファイルをアップロードし、解析してデータベースにアップロードする前に一時的にメモリに保存します。

私はXMLファイルのアップロードを試みるためにmulterを使用しています。私はノードエクスプレスサーバーを持っており、React with .jsxも使用しています。アップロード後、私はそのファイルのデータを解析し、それをPostgresデータベースに投稿します。そのため、アップロードしたファイルをディスクに書き込んでいないので、解析する前にmulterのバッファプロパティを使ってメモリに保存しています。

jQueryをフォームテストに使用して小さなテストプロジェクトで作業していましたが、ここではjQueryを使用していません。フォーム提出が実際にReactでどのように動作するのか、それとも問題でもないかどうかはわかりません。私は、multerの使用に直接関係するコードだけを含んでいます。他のすべてがうまくいきます。

<form 
    id="uploadForm" 
    ref="form" 
    encType="multipart/form-data" 
    method="post" 
    action="/upload" 
    onSubmit={this.handleSubmit} 
> 
<input 
    type="file" 
    name="songlist" 
/> 
<input 
    type="submit" 
    value="UploadFile" 
    name="submit" 
/> 
</form> 

はここで同じコンポーネントに扱う私のフォームの送信です:

は、ここに私のフォームです。 onSubmitはフォームを自動的に提出するのですか、私はここで何か他のことをやろうとしていますか?

handleSubmit(event) { 
    console.log('hey'); 
    event.preventDefault(); 
    this.props.postSongs(); 
}, 

postSongs()私のサーバー側のルーティングに呼び出します:私は、そのファイルがmulterの中に格納されますする必要がありPOSTリクエストを作ってるんだ、私のサーバー側のルートで

postSongs() { 
    axios.post("/upload") 
    .then(() => { 
     console.log('success') 
    }) 
    .catch((err) => { 
     console.error(err); 
    }); 
}, 

そして、ここをメモリ:

const multer = require('multer'); 
const upload = multer({inMemory: true}); 

router.post('/upload', upload.single('songlist'), (req, res, next) => { 

    console.log(req.file); 

    knex('songs') 
    .where('admin_id', adminId) 
    .first() 
    .then((songs) => { 
     console.log(songs); 
    }) 
    .catch((err) => { 
    next(err); 
    }); 
}); 

私はこのコードでは欠けている部分が私の最終目標を達成したが、今、私はちょうどmulterのファイルオブジェクト(req.file)をログに記録しようとしているに関してであります知っています。私はupload.single('songlist')がフォームのsonglistという名前の特定の入力にアクセスし、フォームのアクションにマッチする投稿がそれにマッチするはずだと思ったのですが?

私はこれを正しく説明しているとは思わない。どんな助け?私はこれで多くの時間を無駄にした。

答えて

1

あなたはフォームを投稿していないので、空のボディを投稿しています。代わりにこれを試してください:

var formData = new FormData(document.getElementById('uploadForm')); 
axios.post('upload', formData) 
    .then(() => { 
    console.log('success'); 
    }) 
    .catch((err) => { 
    console.error(err); 
    }); 
+0

Ahhhhhhh!本当にありがとう!私はとても近かった! –

関連する問題