两种方案: 这两种方案传参还是有区别额
在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上传附件
原文地址:https://www.cnblogs.com/yaobolove/p/8744420.html