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

2024-02-19 13:35:03 47

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

1.开始

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

npminstallmulter--save

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

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

{
"fieldname":"avatar",#前端上传文件input的name
"originalname":"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-data"这个属性一定要加上，否则后台接收不到文件。

后端

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

//upload.js

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

varstorage=multer.diskStorage({
destination:function(req,file,cb){
cb(null,'uploads/')
},
filename:function(req,file,cb){
cb(null,Date.now()+file.originalname)
}
})

varupload=multer({storage:storage})

module.exports=upload;

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

destination#设置文件上传路径
filename#重命名文件

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

//file.js

varexpress=require('express');
varrouter=express.Router();

//引入配置文件
varupload=require('../config/upload');

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

module.exports=router;

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

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

fname是前端的name值

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

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

热门推荐

随机推荐