【问题标题】:How to upload a file in node.js server using multer如何使用 multer 在 node.js 服务器中上传文件
【发布时间】:2019-05-13 22:01:24
【问题描述】:

我正在尝试将文件从我的 Angular 应用程序传递到 node.js 服务器。

当我运行应用程序时,我收到以下错误: 错误:请选择文件

HTML:

<upload name="fileUpload" formControlName="fileUpload" #fileUpload (listChange)="updateList($event)" data-kind="primary"
          [imagePreview]="true">
</upload>

这是我的updateList() 方法:

updateList(list: any) {
    this.demolist = Array.apply(this, list);
    this.attachmentReady.emit(this.demolist);
}

节点:

const express = require('express')
const app = express()
const bodyParser = require('body-parser')
const multer = require('multer');
let nodemailer = require('nodemailer');
let aws = require('aws-sdk');
const fs = require('fs');

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads')
    },
    filename: function (req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
    }
});

var upload = multer({ storage: storage });

app.post('/postData', upload.array('fileUpload', 12), (req, res, next) => {
    console.log(req.body);
    res.json(req.body);

    const files = req.files
    if (!files) {
        const error = new Error('Please choose files')
        error.httpStatusCode = 400
        return next(error)
    }
    res.send(files);
}

在另一个项目中,multer 按预期工作。以下是该项目的 HTML:

<form action="/uploadmultiple" enctype="multipart/form-data" method="POST">
    Select images: <input type="file" name="myFiles" multiple>
    <input type="submit" value="Upload your files" />
</form>

我的工作代码和不工作的代码之间的区别在于,如果类型是file,我可以使用标准的input 控件。 但是我现在需要使用upload 控件,并且当我进行该更改时,我的代码无法正常工作。

谁能告诉我如何使用这个控件来传递文件?提前非常感谢!

【问题讨论】:

    标签: node.js angular multer


    【解决方案1】:

    使用npm install --save multer安装multer后

    基本用法示例:

    var express = require('express')
    var multer  = require('multer')
    var upload = multer({ dest: 'uploads/' })
    
    var app = express()
    
    app.post('/uploadmultiple', upload.single('myFiles'), function (req, res, next) {
      // req.file is the `myFiles ` file
      // req.body will hold the text fields, if there were any
    })
    
    app.post('/uploadmultiple', upload.array('myFiles', 12), function (req, res, next) {
      // req.files is array of `photos` files
      // req.body will contain the text fields, if there were any
    })
    

    有关更多信息,您可以阅读文档here

    【讨论】:

    • 您好,感谢您的回答。实际上,我已经让 multer 从事一个较小的项目,就像你在这里展示的那样。但现在在我的项目中,我需要使用来自第 3 方的 upload 控件,而不是标准的 input 控件。我的代码不起作用的原因是因为 node.js 中的 upload.array() 方法需要 HTML 中的控件名称吗?
    • 我已经使用 name 属性更新了上面的代码,但我仍然收到相同的错误消息。
    • 上传组件是否在onChange事件中给出formData,那么你的工作就可以轻松完成
    • 我在上面添加了我的updateList() 方法代码。这是在使用该上传控件上传文件时执行的。执行此操作时,将打印到控制台:demo list - [{"file":{},"id":0,"icon":"doc","src":{"changingThisBreaksApplicationSecurity":"data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,"}}] send.component.ts:50:4 files - [{"file":{},"id":0,"icon":"doc","src":{"changingThisBreaksApplicationSecurity":"data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,"}}]
    猜你喜欢
    • 2019-06-15
    • 2017-12-03
    • 2017-03-30
    • 2018-08-14
    • 1970-01-01
    • 2015-03-09
    • 1970-01-01
    • 2020-12-16
    • 1970-01-01
    相关资源
    最近更新 更多