8wDlpd.png
首页
8wDFp9.png
分类
8wDEOx.png
8wDMfH.png
消息
8wDKte.png
我的
  2. express
  3. Node/Express 文件上传

Node/Express 文件上传

Thebest 2月前
81 0

我使用的是 node v0.10.26 和 express v4.2.0，我对 node 还很陌生。过去三个小时里，我一直在绞尽脑汁想办法让文件上传表单与 node 兼容。...

我使用的是 node v0.10.26 和 express v4.2.0，我对 node 还很陌生。过去三个小时里，我一直在绞尽脑汁尝试让文件上传表单与 node 配合使用。目前，我只是试图让 req.files 不返回未定义。我的视图如下所示 

<!DOCTYPE html>
<html>
<head>
  <title>{{ title }}</title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
  <h1>{{ title }}</h1>
  <p>Welcome to {{ title }}</p>
  <form method='post' action='upload' enctype="multipart/form-data">
    <input type='file' name='fileUploaded'>
    <input type='submit'>
  </form>
</body>
</html>

这是我的路线 

var express = require('express');
var router = express.Router();


/* GET home page. */
router.get('/', function(req, res) {
  res.render('index', { title: 'Express' });
});

router.post('/upload', function(req, res){
console.log(req.files);
});

module.exports = router;

这是我的 app.js 

var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hjs');

app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

/// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

/// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});



module.exports = app;

我看到某个地方包括 methodOverride() 并 bodyParser({keepExtensions:true,uploadDir:path}) 应该有所帮助，但如果我添加这些行，我甚至无法启动我的服务器。

帖子版权声明 1、本帖标题：Node/Express 文件上传
    本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Thebest在本站《express》版块原创发布， 转载请注明出处！
收藏的用户（0） X
正在加载信息~
最新回复 (0)
  • 引用 2楼

    我使用的是 express 3 而不是 4，所以它的 api 可能会改变，但我认为你需要谷歌/bing

  • 引用 3楼

    尝试删除 \'var bodyParser = require('body-parser');\'，并且不要使用该 bodyParser var，而是使用类似下面的方法：app.use(express.bodyParser()); app.use(express.methodOverride()); 我现在没有时间测试这个……

  • 引用 4楼

    虽然有点晚了，但可能对将来的某些人有帮助。这是使用 mongodb 上传 node js 文件的完整教程

  • 引用 5楼

    ExpressJS 问题：

    大多数中间件已从 express 4 中删除。请查看： http://www.github.com/senchalabs/connect#middleware ，需要多部分中间件，例如 busboy、busboy-connect、formidable、flow、parted。

    此示例使用 connect-busboy 中间件。创建 /img 和 /public 文件夹。
    使用文件夹结构：

    \服务器.js

    \img\\'资料上传到哪里\'

    \公共\索引.html

    服务器端 

    var express = require('express');    //Express Web Server 
var busboy = require('connect-busboy'); //middleware for form/file upload
var path = require('path');     //used for file path
var fs = require('fs-extra');       //File System - for file manipulation

var app = express();
app.use(busboy());
app.use(express.static(path.join(__dirname, 'public')));

/* ========================================================== 
Create a Route (/upload) to handle the Form submission 
(handle POST requests to /upload)
Express v4  Route definition
============================================================ */
app.route('/upload')
    .post(function (req, res, next) {

        var fstream;
        req.pipe(req.busboy);
        req.busboy.on('file', function (fieldname, file, filename) {
            console.log("Uploading: " + filename);

            //Path where image will be uploaded
            fstream = fs.createWriteStream(__dirname + '/img/' + filename);
            file.pipe(fstream);
            fstream.on('close', function () {    
                console.log("Upload Finished of " + filename);              
                res.redirect('back');           //where to go next
            });
        });
    });

var server = app.listen(3030, function() {
    console.log('Listening on port %d', server.address().port);
});

    索引.HTML 

    <!DOCTYPE html>
<html lang="en" ng-app="APP">
<head>
    <meta charset="UTF-8">
    <title>angular file upload</title>
</head>

<body>
        <form method='post' action='upload' enctype="multipart/form-data">
        <input type='file' name='fileUploaded'>
        <input type='submit'>
 </body>
</html>

    以下内容将与强大的 SERVER.JS 

    var express = require('express');   //Express Web Server 
var bodyParser = require('body-parser'); //connects bodyParsing middleware
var formidable = require('formidable');
var path = require('path');     //used for file path
var fs =require('fs-extra');    //File System-needed for renaming file etc

var app = express();
app.use(express.static(path.join(__dirname, 'public')));

/* ========================================================== 
 bodyParser() required to allow Express to see the uploaded files
============================================================ */
app.use(bodyParser({defer: true}));
 app.route('/upload')
 .post(function (req, res, next) {

  var form = new formidable.IncomingForm();
    //Formidable uploads to operating systems tmp dir by default
    form.uploadDir = "./img";       //set upload directory
    form.keepExtensions = true;     //keep file extension

    form.parse(req, function(err, fields, files) {
        res.writeHead(200, {'content-type': 'text/plain'});
        res.write('received upload:\n\n');
        console.log("form.bytesReceived");
        //TESTING
        console.log("file size: "+JSON.stringify(files.fileUploaded.size));
        console.log("file path: "+JSON.stringify(files.fileUploaded.path));
        console.log("file name: "+JSON.stringify(files.fileUploaded.name));
        console.log("file type: "+JSON.stringify(files.fileUploaded.type));
        console.log("astModifiedDate: "+JSON.stringify(files.fileUploaded.lastModifiedDate));

        //Formidable changes the name of the uploaded file
        //Rename the file to its original name
        fs.rename(files.fileUploaded.path, './img/'+files.fileUploaded.name, function(err) {
        if (err)
            throw err;
          console.log('renamed complete');  
        });
          res.end();
    });
});
var server = app.listen(3030, function() {
console.log('Listening on port %d', server.address().port);
});
  • 引用 6楼

    所以，我们有一个框架，它改变了重要的 API，使基本的东西变得非常复杂。这就是最流行的 NodeJS 模块？

  • 引用 7楼

    这是一个主要版本。根据 semver.org 规范，主要版本中允许进行重大更改。

  • 引用 8楼

    当然，semver.org 允许在主版本号中进行重大 API 更改，但为了激怒用户，这样做非常糟糕。

  • 引用 9楼

    呃，'bodyParser' 到底是什么？它来自哪里？@Mick

  • 引用 10楼

    我发现这个简单而有效： 

    const express = require('express');
const fileUpload = require('express-fileupload');
const app = express();

// default options
app.use(fileUpload());

app.post('/upload', function(req, res) {
  if (!req.files || Object.keys(req.files).length === 0) {
    return res.status(400).send('No files were uploaded.');
  }

  // The name of the input field (i.e. "sampleFile") is used to retrieve the uploaded file
  let sampleFile = req.files.sampleFile;

  // Use the mv() method to place the file somewhere on your server
  sampleFile.mv('/somewhere/on/your/server/filename.jpg', function(err) {
    if (err)
      return res.status(500).send(err);

    res.send('File uploaded!');
  });
});

    express-文件上传

  • 引用 11楼

    那些寻找具有最新 NPM 包的更新解决方案的人应该看看这里。express-fileupload 使这变得非常容易。

  • 引用 12楼

    这个答案是 Github 上给出的示例，但是查看存储库文件时，您会看到行 sampleFile.mv... 写为 uploadPath = __dirname + '/uploads/' + sampleFile.name; - 我发现这一点额外的澄清很有帮助 链接

  • 引用 13楼

    确保您的

    element has enctype="multipart/form-data". Otherwise req.files will be empty.
  • 引用 14楼

    另一种选择是使用 multer ，它使用引擎盖下的 busboy，但设置更简单。 

    var multer = require('multer');
var upload = multer({dest: './uploads/'});

    您可以注册一个全局中间件并设置上传的目的地： 

    app.use(upload.single('avatar'));

    然后，在任何您希望文件所在的 POST 中，您都可以访问数据： 

    app.post('/', function(req, res) {
    // req.file (singular) is the file
    console.dir(req.file);
});

    您可能只想在特定路由上设置它，而不是全局注册的中间件： 

    app.post('/', upload.single('avatar'), function(req, res){
    console.dir(req.file);
});

    其他中间件选项包括 fields , array ，和 none （用于纯文本多部分）。例如发送多个文件： 

    app.post('/', uploads.array('photos', 12), function(req, res){
    // req.files (plural) is an array of files
    console.dir(req.files);
});

    在视图中创建表单时， enctype='multipart/form-data multer 需要工作： 

    form(role="form", action="/", method="post", enctype="multipart/form-data")
    div(class="form-group")
        label Upload File
        input(type="file", name="avatar", id="avatar")

    欲了解更多示例，请查看 github 页面。

  • 引用 15楼

    在对未知字段错误感到沮丧后，我离开了 multer。我的代码中的所有内容都是正确的。它大多数时候都有效，然后神秘地显示此异常，而所有内容保持不变（环境、文件、代码、文件名）

  • 引用 16楼

    抛出新的 TypeError('app.use() 需要中间件函数');

  • 引用 17楼

    如果在将 multer 函数传递给 app.use 时遇到问题，则可能需要进行如下设置 ``` var upload = multer({ dest: 'uploads/' }); var app = express() app.post('/profile', upload.single('field-name'), function (req, res, next) { console.log(req.file); }) ```

  • 引用 18楼

    Mick Cullen 的 答案 简化版本（ 要点 ——部分是为了证明实现这一点并不需要太复杂；部分是为了给那些不想阅读大量代码的人提供快速参考。

    你必须让你的应用程序使用 connect-busboy : 

    var busboy = require("connect-busboy");
app.use(busboy());

    除非您触发它，否则它不会执行任何操作。在处理上传的调用中，执行以下操作： 

    app.post("/upload", function(req, res) {
    if(req.busboy) {
        req.busboy.on("file", function(fieldName, fileStream, fileName, encoding, mimeType) {
            //Handle file stream here
        });
        return req.pipe(req.busboy);
    }
    //Something went wrong -- busboy was not loaded
});

    让我们详细分析一下：

    • 检查是否 req.busboy 设置（中间件已正确加载）
    • 你设置了一个 "file" 监听器 req.busboy
    • 您将内容传输 req 到 req.busboy

    文件监听器内部有几个有趣的东西，但真正重要的是 fileStream ：这是一个 可读的 ，然后可以像平常一样将其写入文件。

    陷阱： 您必须处理这个可读性，否则 express 将永远不会响应请求 ，请参阅 busboy API （ 文件 部分）。

  • 引用 19楼

    这是一个对我来说更简单的方法： 

    const express = require('express');
var app = express();
var fs = require('fs');

app.post('/upload', async function(req, res) {

  var file = JSON.parse(JSON.stringify(req.files))

  var file_name = file.file.name

  //if you want just the buffer format you can use it
  var buffer = new Buffer.from(file.file.data.data)

  //uncomment await if you want to do stuff after the file is created

  /*await*/
  fs.writeFile(file_name, buffer, async(err) => {

    console.log("Successfully Written to File.");


    // do what you want with the file it is in (__dirname + "/" + file_name)

    console.log("end  :  " + new Date())

    console.log(result_stt + "")

    fs.unlink(__dirname + "/" + file_name, () => {})
    res.send(result_stt)
  });


});
  • 引用 20楼

    您无法等待 fs.writeFile()，因为它不返回承诺。不过您可以等待 fs.promises.writeFile() - 但该方法不会接受回调，因为它会返回承诺。

返回
作者最近主题：