两种方案： 这两种方案传参还是有区别额
在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;
}
});
}
