node文件上传功能简易实现代码

网友投稿 268 2023-05-07


node文件上传功能简易实现代码

找了不少文件上传的相关模块,最后选择了比较常用,并且是express推荐使用的 multer 来实现文件上传,附上 github 地址

1. 开始

开始第一步,自然就是安装模块,不多说

npm install multer --save

这里简单说一下,因为文件上传是用 post 方法提交数据,所以上传的单文件或者多文件会作为一个 body 体添加到请求对象中,我们可以通过 req.file 或者 req.files 查看上传后文件的相关信息。

以单文件上传为例,req.file 返回一个对象:

{

"fieldname":"avatar", #前端上传文件input的name

"originalname":http://"Wx.php", #本地文件名

"encoding":"7bit", #文件编码类型

"mimetype":"text/php", #文件类型

"destination":"uploads/", #上传根目录

"filename":"1497286037422Wx.php", #上传后文件名

"path":"uploads/1497286037422Wx.php", #文件路径

"size":18174 #文件大小

}

该对象的 key 值是固定的,velue 值根据配置生成,用于实现相关逻辑

2. 实现

实现分两部分,前端和后端

前端

前端就是普通的写法,form 表单提交

切记,enctype="multipart/form-dathttp://a" 这个属性一定要加上,否则后台接收不到文件。

后端

首先我们新建配置文件,upload.js

// upload.js

var multer = require('multer'); # 引入模块

var storage = multer.diskStorage({

destination: function (req, file, cb) {

cb(null, 'uploads/')

},

filename: function (req, file, cb) {

cb(null, Date.now()+file.originalname)

}

})

var upload = multer({ storage: storage })

module.exports = upload;

diskStorage方法相当于创建一个磁盘存储引擎,配置文件上传路径,文件名等,可控性更高。

destination # 设置文件上传路径

filename # 重命名文件

然后新建路由接收文件,file.js

// file.js

var express = require('express');

var router = express.Router();

// 引入配置文件

var upload = require('../config/upload');

router.post('/upload', upload.single('avatar'), function(req, res, next) {

res.send(req.file);

});

module.exports = router;

file.js 中 upload.singvRdKfOysjVle() 方法表示接受单文件,常用的有

upload.single(fname); // 接收单文件

upload.array(fname[, maxCount]) //接收多文件,maxCount表示接收最大数量

fname 是前端 的 name 值

基本的上传文件方法就这些了,当然还有很多的配置参数之类的设置,要参考 GitHub 说明,地址在开头,需要者自行查阅


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:mock测试工具的语言(mock测试)
下一篇:Java中的类加载器_动力节点Java学院整理
相关文章

 发表评论

暂时没有评论,来抢沙发吧~