两种方案： 这两种方案传参还是有区别额
在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;
}
});
}
原文地址：https://www.cnblogs.com/yaobolove/p/8744420.html
时间： 2024-11-05 23:09:02