使用 Multer 上传文件而不使用表单标签上的 action, method, encrypt="multipart/form-data" 属性

Question

所以我正在尝试使用 Multer 上传图片，但我想使用 Angular 的 $http.post 来上传文件。没有提交按钮触发表单方法和操作。问题是，如果我不使用加密、方法或 post 属性，req.file 最终会变得未定义，并且图像不会显示在上传文件夹中。

所以我的问题是，有没有什么方法可以使用 Multer 文件上传，而不是通过带有操作的常规表单方法，而是 angular 的 $http.post()。当我现在这样做时，req.file 总是未定义的。

这是我的代码供参考

app.js（节点）

var express = require('express');
var http    = require('http');
var path    = require('path');
var fs      = require('fs');
var crypto = require('crypto');
var multer  = require('multer');
var bodyParser = require('body-parser');
var app = express();
var port = process.env.port || 8080;

app.set('view engine', 'ejs');
app.use('/assets', express.static(__dirname + '/public'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

var path = require('path');
var multer = require('multer');

var storage = multer.diskStorage({
  destination: './public/uploads/',
  filename: function (req, file, cb) {
    crypto.pseudoRandomBytes(16, function (err, raw) {
      if (err) { return cb(err); }
            cb(null, raw.toString('hex') + path.extname(file.originalname));
    });
  }
});

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

app.get('/', function (req, res) {
    'use strict';
    res.render('index', {filename: filename });
});

app.post('/', function (req, res) {
    'use strict';
});

app.post('/upload', upload.single('image'), function (req, res) {
    filename = req.files;
    console.log(req.files);
});

app.listen(port);

HTML 表格:

<form action="/upload" method="post" encrypt="multipart/form-data">
<div class="form-group">
<label for="image">Choose Image</label>
<input id="inputImage" name="image" type="file">
<button class="form-control" ng-click="uploadFile()">Add</button>
</form>

所以我基本上想删除此默认行为并仍然获得 req.file 对象。

最后是我的 Angular 代码：

$scope.uploadFile = function(){
        var file = $scope.myFile;
        var uploadUrl = "/upload";
        var fd = new FormData();
        fd.append('file', file);

        $http.post(uploadUrl,fd, {
                transformRequest: angular.identity,
                headers: {'Content-Type': undefined}
        })
        .success(function(){
            console.log("success!!");
        })
        .error(function(){
            console.log("error!!");
        });
    };

请帮助我...现在我得到 $http.post() .error() 回调，如果我深入研究它，那是因为 req.file 在我的节点 app.js

Answer 1

为什么要使用 headers: {'Content-Type': undefined} 您应该发送图像的内容类型而不是 undefined 或者删除 header 并尝试。此外，通过使用 console.log(req.body) 您可以检查 body 您提交的内容

使用 Multer 上传文件而不使用表单标签上的 action, method, encrypt="multipart/form-data" 属性

Upload files with Multer without using action, method, encrypt="multipart/form-data" attributes on form tag

file-upload

node.js

express

angularjs

multer