NODE_多文件上传

最新推荐文章于 2023-12-07 09:07:16 发布

小歪 | 前端

最新推荐文章于 2023-12-07 09:07:16 发布

阅读量448

点赞数 1

分类专栏： # NODE 文章标签： node

本文链接：https://blog.csdn.net/weixin_44599931/article/details/120975786

版权

NODE 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用Node.js的Express和Multer库实现多文件上传功能，包括设置存储路径、重命名文件以及处理上传请求。前端部分使用了Axios库和FormData来构造上传请求。同时，博客还展示了前端和后端的代码示例，帮助开发者理解整个上传流程。

摘要由CSDN通过智能技术生成

安装依赖

npm i express
npm i multer

单文件上传

修改多文件上传代码
在这里插入图片描述
node.js

app.post('/upload', upload.single('file'), function (req, res, next) {
    req.files.forEach((item,i) => {
        console.log(item);
    })
    res.send('上传成功！')
});

前端代码

let formData = new FormData();
formData.append('file', this.fileList[0].file)
axios({
    method: 'post',
    url: 'http://127.0.0.1:3000/upload',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
        'X-Requested-With': 'XMLHttpRequest'
    },
    data: formData
}).then((result) => {

}).catch((err) => {

});

多文件上传

node.js

var fs = require('fs');
var express = require('express');
var multer = require('multer');
var bodyParser = require('body-parser');

var app = express();

//跨域处理
var allowCrossDomain = function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', '*');
    res.setHeader('Access-Control-Allow-Headers', '*');
    next();
};
app.use(allowCrossDomain);
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

/**
 * 重命名图片后缀
 */
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'public/upload/');
    },
    filename: function (req, file, cb) {
        var fileFormat = file.originalname.split('.');
        cb(null, file.fieldname + '-' + Date.now() + '.' + fileFormat[fileFormat.length - 1]);
    },
});
var upload = multer({ storage: storage });
// var upload = multer({ dest: 'upload/' });
// 多图上传
app.post('/upload', upload.array('file', 8), function (req, res, next) {
    req.files.forEach((item,i) => {
        console.log(item);
    })
    res.send('上传成功！')
});

app.listen(3000, () => {
    console.log('服务启动3000端口...');
});

前端代码

let formData = new FormData();
this.fileList.forEach(item => {
    console.log(item);
    formData.append('file', item.file)
});
axios({
    method: 'post',
    url: 'http://127.0.0.1:3000/upload',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
        'X-Requested-With': 'XMLHttpRequest'
    },
    data: formData
}).then((result) => {

}).catch((err) => {

});