Node.js express+multerによるファイルアップロード
1879 ワード
前回はapplication/jsonおよびapplication/x-www-form-urlencodedフォーマットのリクエストパラメータを処理しました
この文章ではmultipart/form-dataフォーマットパラメータを処理し,主にexpressのミドルウェアmulterを利用する
Multiperはフォームファイルからのアップロードを処理するために使用され、multipart/form-data形式で、パーソナライズされた設定をサポートします.
クライアント選択画像呼び出しアップロードインタフェース
サービス側利用ミドルウェアmulter処理
これで簡単なアップロードファイルは成功しましたが、ファイルには接尾辞名がなく、名前がランダムに生成されていることがわかります.
次に、パーソナライズされた構成を使用します.
これでform-dataフォームのアップロードが実現しました
この文章では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フォームのアップロードが実現しました