Отправка изображения на сервер Node.js от клиента (AngularJS)

Question

У меня есть очень быстрый вопрос:

У меня есть IMG тег (в моем файле шаблон), который содержит изображение и в моем угловом контроллере я называю:

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

Я хочу отправить это изображение^на бэкэнд (я использую REST). URL-адрес, который я использовал бы для этого метода POST: '/ api/v1/images/addImage'

Я попытался загрузить ng-file-upload и $ http.post, но ничего не работает. Есть ли способ, которым я могу просто отправить это изображение на сервер, чтобы сохранить его в базе данных или в файловой системе? Я открыт для любых решений, чтобы это произошло.

Спасибо!

Answer 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> 

Answer 2

Вы можете использовать ниже библиотеки, они имеют хорошую документацию и

Для Frontend - https://github.com/nervgh/angular-file-upload

Для Backend - https://github.com/expressjs/multer

Образец Snippet -

В 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); 
    }); 
});