zoukankan      html  css  js  c++  java
  • Nodejs进阶:基于express+multer的文件上传

    • 安装组件

    npm install express multer --save
    • 服务端代码server.js

    var Express = require('express');
    var multer = require('multer');
    var bodyParser = require('body-parser');
    var app = Express();
    app.use(bodyParser.json());
    // multer 提供了 storage 这个参数来对资源保存的路径、文件名进行个性化设置。
    var Storage = multer.diskStorage({
        destination: function (req, file, callback) {
            callback(null, "./Images");
        },
        filename: function (req, file, callback) {
            callback(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);
        }
    });
    
    //Field name and max count 多个文件上传
    var upload = multer({ storage: Storage }).array("imgUploader", 3); 
    
    // var upload = multer({ dest: 'upload/' });简单配置
    // 也可以写在post方法中 
    // app.post('/upload-single', upload.single('imgUploader'), function(req, res, next){
    //     res.send({ret_code: '0'});
    // });
    
    app.get("/", function (req, res) {
        res.sendFile(__dirname + "/index.html");
        //也可以这样读取文件
        // var form = fs.readFileSync('./form.html', {encoding: 'utf8'});
        // res.send(form);
    });
    
    app.post("/api/Upload", function (req, res) {
        upload(req, res, function (err) {
            if (err) {
                return res.end("Something went wrong!");
            }
            return res.end("File uploaded sucessfully!.");
        });
    });
    
    app.listen(2000, function (a) {
        console.log("Listening to port 2000");
    });
    • 前端页面index.html

    <form id="frmUploader" enctype="multipart/form-data" action="api/Upload/" method="post">
            <input type="file" name="imgUploader" multiple />
            <input type="file" name="imgUploader" multiple />
            <input type="file" name="imgUploader" multiple />
            <input type="submit" name="submit" id="btnSubmit" value="Upload" />
    </form>
    • 运行服务

    node server

    访问 http://127.0.0.1:2000/ ,选择文件,点击“提交”,done。然后,你就会看到Images目录下多了个文件。

    • 文件信息

    • console.log('文件类型:%s', file.mimetype);
      console.log('原始文件名:%s', file.originalname);
      console.log('文件大小:%s', file.size);
      console.log('文件保存路径:%s', file.path);
  • 相关阅读:
    软件工程第一次作业
    Python正则表达式学习摘要
    个人作业——软件工程实践总结作业
    个人作业——软件评测
    软件工程实践2019第五次作业--结对编程的实现
    软件工程实践2019第四次作业
    软件工程实践2019第三次作业
    软件工程实践2019第二次作业
    软件工程实践2019第一次作业
    个人作业——软件工程实践总结&个人技术博客
  • 原文地址:https://www.cnblogs.com/cosyer/p/7429328.html
Copyright © 2011-2022 走看看