从客户端（AngularJS）向 Node.js 服务器发送图像答案

【问题标题】：Sending an image to Node.js server from client (AngularJS)从客户端（AngularJS）向 Node.js 服务器发送图像
【发布时间】：2016-12-12 02:41:07
【问题描述】：

我有一个非常简短的问题：

我有一个包含图像的 img 标签（在我的模板文件中），在我调用的 Angular 控制器中：

var image = document.getElementById('srcImage');

我想将此图像 ^ 发送到后端（我正在使用 REST）。我将用于此 POST 方法的 url 是： '/api/v1/images/addImage'

我已经尝试过 ng-file-upload 和 $http.post，但似乎没有任何效果。有什么方法可以简单地将这个图像发送到服务器，以便我可以将它存储在数据库或文件系统中？我愿意接受任何解决方案来实现这一点。

谢谢！！

【问题讨论】：

我没有发布作为答案，因为我遇到了同样的问题并解决了问题......我所做的是使用 Cloudinary，我上传了图像，然后使用我存储的 Post 发送了链接在数据库。我知道正确的方法是将其转换为字节流并通过 Post 发送，然后使用图像。我会密切注意这一点，因为这是我尝试过但失败的事情。
嗨艾伦，感谢您的回答。你知道如何将其转换为字节流并存储吗？我尝试转换为 base64，但我一直在这几天没有积极的结果。谢谢。
见：stackoverflow.com/a/10755011
@Zain 你能详细说明你想要做什么吗？听起来您正在提供一个带有图像的页面，然后您想将其发送到您无法控制的 REST api。这似乎是一个奇怪的案例，我只是想确保我们不会错过解决实际问题的更简单或更标准的方法。
@Mic 嘿，谢谢您的回复。我使用节点创建了 REST api，我要做的就是将模板文件中的图像发送到服务器。我能够使用 ng-file-upload 但 POST 请求的服务器端的 req.file 或 req.files 未定义。

标签： javascript html angularjs node.js rest

【解决方案1】：

You can try multipart/form-data like this:

<form id       =  "uploadForm"
     enctype   =  "multipart/form-data"
     action    =  "/api/photo"
     method    =  "post"
>
<input type="file" name="userPhoto" />
<input type="submit" value="Upload Image" name="submit">
</form>

【讨论】：

因此，如果我想使用“document.getElementByID('..')”获取图像，那么我是否必须确保 img 标签中的“enctype”设置为“multipart/表单数据”？因为现在，我可以使用 ng-file-upload 并且在我的 Node.js 脚本（POST）中，req.body 存在但 req.files 或 req.file 不存在，所以我想知道是否没有设置“enctype "有什么关系吗？
好的，我会在今天晚些时候尝试，希望它有效！
@RohitShedage 不要只用链接写答案。当链接消失时，帖子变得毫无用处。而是尝试在您的帖子中总结链接的内容。 stackoverflow.com/help/how-to-answer

【解决方案2】：

您可以使用以下库，它们也有很好的文档

对于前端 - https://github.com/nervgh/angular-file-upload

对于后端 - https://github.com/expressjs/multer

示例片段 -

在 HTML 中：

<input type="file" nv-file-select="" uploader="ctrl.uploader" multiple />

角度控制器：

vm.uploader = new FileUploader({
    url: 'http://' + SERVER_URL + '/upload',
    formData: [{
        id: 1
    }]
});

vm.save = function() {
    vm.uploader.onBeforeUploadItem = function (item) {
        console.log(item);
        /* some action */
    };

    vm.uploader.onSuccessItem = function (item, imgResponse, status, headers) {
        console.log(item);
        console.log(imgResponse);
        console.log(status);
        console.log(headers);
        /* some action */
    };
};

节点服务器：

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

var fileName = '';
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        var dirPath = 'path/to/save/file'
        if (!fs.existsSync(dirPath)) {
            var dir = fs.mkdirSync(dirPath);
        }
        cb(null, dirPath + '/');
    },
    filename: function (req, file, cb) {
        var ext = file.originalname.substring(file.originalname.lastIndexOf("."));
        fileName = Date.now() + ext;
        cb(null, fileName);
    }
});

// Assuming Express -
app.get('/upload', function (req, res) {
    var upload = multer({
        storage: storage
    }).array('file', 12);

    upload(req, res, function (err) {
        if (err) {
            // An error occurred when uploading
            res.json(err);
        }
        res.json(fileName);
    });
});

【讨论】：

感谢您的回答，我也会看看这些选项。