Nuxt.jsでzipファイルをアップロードする方法
【概要】Nuxt.jsでzipファイルをアップロードする方法についてまとめます。ここでの処理は下記の手順になります。1. フォームにzipファイルを設定し、送信する2. Node.jsで設定したAPIにzipファイルデータを送信する3. zipファイルデータを/static/zipに保存する【詳細】1. multerをインストールする。FormDataを処理する為にmulterを、ファイル操作する為にインストールします。npm i multer2. Nuxt.jsのソースi. Form部分lt;b-form @submit.prevent"uploadZip"lt;b-form-group label"upload" label-cols-sm"1" label-for"uploadZip"lt;b-form-file v-model"zipFiles" id"uploadZip" accept".zip" ref"file-input" browse-text"選択"multiple placeholder"ファイルを選択、もしくはドロップして下さい" size"lg"lt;/b-form-filelt;b-button v-if"zipFiles" @click"uploadZip()" variant"primary" class"mt-3 w-100"アップロードlt;/b-buttonlt;b-button v-if"zipFiles ! null" @click"clearFiles()" class"mt-3 w-100"Clearlt;/b-buttonlt;/b-form-grouplt;/b-formb-form-fileタグの「multiple」を設定する事で複数ファイルをフォームに設定し、アップロードする事ができます。もし、複数アップロードしない場合は「multiple」を設定する必要はありません。ii. export default部分export default {data() {return {zipFiles: null,}},methods: {async uploadZip() {for (let zipFile of this.zipFiles) {let formData new FormData();formData.append('application/zip', zipFile);let config { headers: { 'content-type': 'multipart/form-data' } };await axios.post(process.env.BASE_URL + '/api/zip', formData, config).then(function(response) { console.log('response', response); }).catch(function(error) { console.log('error', error); })}},clearFiles() {this.zipFiles null;this.$refs['file-input'].reset();}},}3. Node.js(Express)のmulter部分ここでは/static/zipディレクトリに格納します。i. ランダムなファイル名の場合プログラムが作成するランダムな文字列のファイル名で保存されます。const multer require('multer');const upload multer({ dest: './static/zip/' });ii. ファイル名を指定する場合投稿したzipのファイル名で保存します。const multer require('multer');const multerStorage multer.diskStorage({destination (req, file, cb) {cb(null, './static/zip/');},filename (req, file, cb) {cb(null, file.originalname);}});const upload multer({ storage: multerStorage });4. Node.js(Express)のAPI部分APIに送信した際に保存されます。下記では送信されたfileの情報とformのbodyに格納値をlog出力しています。log出力が不要な場合は削除して下さい。router.post('/zip', upload.single('application/zip'), function(req, res) {console.log('req.file',req.file);console.log('req.body',req.body);res.send('upload success');});
