express 实现文件上传。

代码注释很清楚,仔细看代码实现逻辑,个人觉得挺简单。

前端:

        <form action="/file_upload" method="post" enctype="multipart/form-data">
            <input type="file" name="file" id="">
            <br />
            <input type="submit" value="上传文件" />
        </form>

serve端:

var express = require('express'); //引入express
var app = express(); // 创建实例app
var fs = require("fs"); //引入fs,fs 是node中一个文件操作模块,包括文件创建,删除,查询,读取,写入。
 
var bodyParser = require('body-parser'); // 这个模块是获取post请求传过来的数据。
var multer  = require('multer'); //multer - node.js 中间件,用于处理 enctype="multipart/form-data"(设置表单的MIME编码)的表单数据。
 
app.use('/public', express.static('public')); // 设置静态文件的中间件
app.use(bodyParser.urlencoded({ extended: false })); // 判断请求体是不是json,不是的话把请求体转化为对象
app.use(multer({ dest: '/tmp/'}).array('file'));
 
app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})
 // 上传文件api
app.post('/file_upload', function (req, res) {
 
   console.log(req.files[0]);  // 上传的文件信息
 
   var des_file = __dirname + "/" + req.files[0].originalname; //文件名
   fs.readFile( req.files[0].path, function (err, data) {  // 异步读取文件内容
        fs.writeFile(des_file, data, function (err) { // des_file是文件名,data,文件数据,异步写入到文件
         if( err ){
              console.log( err );
         }else{
               // 文件上传成功,respones给客户端
               response = {
                   message:'File uploaded successfully', 
                   filename:req.files[0].originalname
              };
          }
          console.log( response );
          res.end( JSON.stringify( response ) );
       });
   });
})
 
var server = app.listen(8081, function () {
 
  var host = server.address().address
  var port = server.address().port
 
  console.log("应用实例,访问地址为 http://%s:%s", host, port)
 
})
1. 安装express和multer ``` npm install express multer --save ``` 2. 引入依赖 ``` const express = require('express') const multer = require('multer') const path = require('path') ``` 3. 创建express实例 ``` const app = express() ``` 4. 配置multer ``` const storage = multer.diskStorage({ // 设置上传后文件路径,uploads文件夹会自动创建。 destination: function (req, file, cb) { cb(null, 'uploads/') }, // 给上传文件重命名,获取添加后缀名 filename: function (req, file, cb) { const extname = path.extname(file.originalname) cb(null, Date.now() + extname) } }) const upload = multer({ storage: storage }) ``` 5. 创建路由 ``` // 单文件上传 app.post('/upload', upload.single('file'), (req, res, next) => { const file = req.file if (!file) { const error = new Error('Please upload a file') error.httpStatusCode = 400 return next(error) } res.send(file) }) // 多文件上传 app.post('/uploads', upload.array('files', 12), (req, res, next) => { const files = req.files if (!files) { const error = new Error('Please upload files') error.httpStatusCode = 400 return next(error) } res.send(files) }) ``` 6. 启动服务 ``` app.listen(3000, () => { console.log('Server started on port 3000') }) ``` 完整代码如下: ``` const express = require('express') const multer = require('multer') const path = require('path') const app = express() const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, 'uploads/') }, filename: function (req, file, cb) { const extname = path.extname(file.originalname) cb(null, Date.now() + extname) } }) const upload = multer({ storage: storage }) app.post('/upload', upload.single('file'), (req, res, next) => { const file = req.file if (!file) { const error = new Error('Please upload a file') error.httpStatusCode = 400 return next(error) } res.send(file) }) app.post('/uploads', upload.array('files', 12), (req, res, next) => { const files = req.files if (!files) { const error = new Error('Please upload files') error.httpStatusCode = 400 return next(error) } res.send(files) }) app.listen(3000, () => { console.log('Server started on port 3000') }) ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值