NodeJS & Angular 图片上传

Question

尝试了很多可用的 Internet 教程，但我仍然无法使其正常运行。我在 NodeJS 中使用 multer 模块，在 AngularJS 中使用 ng-file-upload。我用 multer 设置做了两个助手（因为我有两个场景，两个上传必须转到不同的文件夹）。后端文件位于 APP/APP_BACK/ 文件夹中，因此在目标路径中我返回一个文件夹并输入 APP_FRONT/images/header。这是一个帮助代码片段 (/helpers/uploadHeader.js)：

var storage = multer.diskStorage({
destination: function (req, file, callback) {
    callback(null, '../APP_FRONT/images/header/');
},
filename: function (req, file, callback) {  
    var ext = filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);
    callback(null, file.fieldname + '-' + '.' + ext);
}

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

var helper = {
    upload: upload
};

module.exports = helper;

这是路由器文件：

var headerHelper= require('../helpers/uploadHeader');

router.post('/header', headerHelper.upload.single('header'), function(req, res, next) {
   headerHelper.upload(req, res, function(err){
       if(err){
           res.status(400).send(err);
           console.log(err);
           return;
       }
       res.status(200).send({ code:200, message:'Header upload successful!'    });
   });
});

"header" 将是输入表单的名称或 Postman 中的键值。

在Angular中，我在应用程序中注入了'ngFileUpload'模块，并将'Upload'服务注入到所需的控制器中，并在uploadHeader()函数中使用它，该函数绑定在表单内的按钮上客户端：

$scope.uploadHeader = function (file) {
        Upload.upload({
            url: 'http://localhost:3003/upload/header',
            method: 'POST',
            file: file
        }).then(function (response) {
            console.log('Success ' + response.config.data.file.name + 'uploaded. Response: ' + response.data);
        }, function (error) {
            console.log('Error status: ' + error.status);
        }, function (evt) {
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
            console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
        });

我尝试使用 Postman：

Postman request SS

并得到这个错误：

"Error: ENOENT: no such file or directory, open 'c:\Users\Username\Desktop\APP\APP_FRONT\images\header\header.jpg'"

当我从客户端尝试时，出现以下错误：

"错误：意外字段
在 makeError " 和 “类型错误：dbg 未定义”

我已经查阅了 Google，尝试了一些教程，但还是卡在了这个上面。

Answer 1

在您的路由器中，您告诉 multer 在多部分表单数据中查找名为 "header" 的对象。您的 angularJS 代码将其添加为名为 'file'.

的对象

如果您将路由器中的线路更改为：

router.post('/header', headerHelper.upload.single(**'header'**), function(req, res, next) {
//.....
    }

至：

router.post('/header', headerHelper.upload.single(**'file'**), function(req, res, next) {
//....
}

它应该可以解决问题。

Answer 2

编辑：找到解决方案

其实是multer的storate设置的文件名功能的问题。在上面 post 中，我将日期时间戳和文件扩展名附加到字段名：

filename: function (req, file, callback) {
    var datetimestamp = moment().format('DD-MM-YY_HH:mm:ss');
    var filename = file.originalname;
    var ext = filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);

    callback(null, file.fieldname + '-' + datetimestamp + '.' + ext);
}

由于某种原因，无法完成上传，出现错误。

我将文件名函数更改为 return 只有文件的原始名称：

filename: function (req, file, callback) {
        callback(null, file.originalname);
    }

现在一切正常。但是现在，问题是，为什么自定义文件名不起作用？

NodeJS & Angular 图片上传

NodeJS & Angular Image upload

angularjs

node.js

multer

ng-file-upload