Node.js express+multerによるファイルアップロード

1879 ワード

前回はapplication/jsonおよびapplication/x-www-form-urlencodedフォーマットのリクエストパラメータを処理しました
この文章ではmultipart/form-dataフォーマットパラメータを処理し,主にexpressのミドルウェアmulterを利用する
Multiperはフォームファイルからのアップロードを処理するために使用され、multipart/form-data形式で、パーソナライズされた設定をサポートします.
クライアント選択画像呼び出しアップロードインタフェース


//     
uploadImg(e){
  if(!e.target.files.length) return
  let formData = new FormData()
  formData.append('file',e.target.files[0])
  axios({
    url:'/api' + '/upload', //         
    method:'post',
    data:formData,
    headers:{
      'Content-Type':'multipart/form-data' //   form-data  
    }
  }).then(res => console.log(res))
}

サービス側利用ミドルウェアmulter処理
let express = require('express')
let router = express.Router()
let multer = require('multer') //   multer   
let upload = multer({dest:'upload/'}) //         

//    file           
router.post('/upload', upload.single('file'), (req, res) => {
	res.send('success')
})

これで簡単なアップロードファイルは成功しましたが、ファイルには接尾辞名がなく、名前がランダムに生成されていることがわかります.
次に、パーソナライズされた構成を使用します.
let express = require('express')
let router = express.Router()
let multer = require('multer')

let Storage = multer.diskStorage({
	destination: (req, file, callback) {
		callback(null,'./upload') //      /upload
	},
	filename: (req, file, callback){
		callback(null, file.fieldname + "_" + Data.now() + "_" + file.originalname) //       
	}
})

//        ,    file
let upload = multer({storage:Storage}).array('file', 3)

//     
router.post('/upload', (req, res) => {
	upload(req, res, err => {
		if (err) throw err
		res.send('success')
	})
})

これでform-dataフォームのアップロードが実現しました