nodeJs上傳附件
阿新 • • 發佈：2018-04-08
then type render title app == style script mod
兩種方案： 這兩種方案傳參還是有區別額
在nodeJs中上傳附件調用了 multer 的中間件，采用這個中間件來上傳
首先是表單（前端部分）：
<!DOCTYPE html>
<html>
<head>
<title>nodejs文件上傳</title>
<script src="/javascripts/jquery.min.js"></script>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<input name="fileUpload" type="file" />
<!--1-->
<img src="" >
<button type="submit">上傳</button>
</form>
<script>
(function($){
$(‘input‘).on(‘change‘, function(event) {
var files = event.target.files,
reader = new FileReader();
if(files && files[0]){
reader.onload = function (ev) {
$(‘img‘).attr(‘src‘, ev.target.result);
}
reader.readAsDataURL(files[0]);
}
})
}(jQuery))
</script>
</body>
</html>
服務器端：
var express = require(‘express‘); var router = express.Router(); var multer = require(‘multer‘); var fs = require(‘fs‘); const UPLOAD_PATH = ‘./uploads‘ var upload = multer({ dest: UPLOAD_PATH }) /* GET home page. */ router.get(‘/‘, function(req, res, next) { res.render(‘index‘, { title: ‘Express‘ }); }); //多文件上傳 // router.post(‘/upload‘, upload.array(‘fileUpload‘), function (req, res, next) { // const files = req.files; // const response = []; // const result = new Promise((resolve, reject) => { // files.map((v) => { // fs.readFile(v.path, function(err, data) {// fs.writeFile(`${UPLOAD_PATH}/${v.originalname}`, data, function(err, data) { // const result = { // file: v, // } // if (err) reject(err); // resolve(‘成功‘); // }) // }) // }) // }) // result.then(r => { // res.json({ // msg: ‘上傳成功‘, // }) // }).catch(err => { // res.json({ err }) // }); // }) //單個文件上傳 router.post(‘/upload‘, upload.single(‘fileUpload‘), function (req, res, next) { const { file } = req; console.log(req.files); fs.readFile(file.path, function(err, data) { fs.writeFile(`${UPLOAD_PATH}/${file.originalname}`, data, function (err) { if (err) res.json({ err }) res.json({ msg: ‘上傳成功‘ }); }); }) }) module.exports = router;
這事表單上傳還有一種就是用異步上傳（我比較常用的一種）
這種的話需要懟傳輸的數據進行重新封裝 （首先把所得的數據封裝為FormData 然後給後臺）
let _this = this;
document.getElementById(‘upload‘).onchange = function (e) {
let file = e.target.files[0];
var formData = new FormData();
formData.append(‘fileUpload‘, file);
_this.axios.post(‘/user/file-upload‘, formData).then(function (response) {
if (response.data.state === 200) {
_this.imageUrl = _this.$store.state.imgBaseUrl + response.data.result;
_this.registerFromData.imageUrl = response.data.result;
}
});
}
nodeJs上傳附件