如何从本地文件夹（磁盘存储）读取或获取映像文件，并使用nodejs服务器将其发送到Angularjs？

Question

我一直试图从我的文件夹中获取一个图像文件并使用节点服务器将其提供给我的Angular UI，nodejs将图像文件作为缓冲区格式读取但是如何将其发送到角度代码？ 以及如何在html页面中使用它？

HTML

<img class="img img-thumbnail img-responsive" ng-src="{{imager}}"/>

角度代码：

$http.get("/getimages").success(function(data) {
    $scope.imager=$parse(data);
}).error(function(data) {
    console.log(data)
});

节点服务器代码：

app.get("/getimages",function(req,res) {
    var myfiles=fs.readFileSync("./fromnode/image1.jpg");
    res.writeHead(200, {'Content-Type': 'image/jpg' });
    res.end(myfiles, 'binary');
});

Answer 1

使用input:file

点击输入浏览器文件，将文件提交到服务器;

<input type="file" id="J_uploadFile" style="display:none;" />
<script>
var $options = {
        type: 'POST',
        url: window.URL.uploadfile,  //setting you server image upload url
        xhrFields: {
            withCredentials: true
        },
        crossDomain: true,
        processData: false,  // tell jQuery don't 
        contentType: false,   // tell jQuery don't setting Content-Type request header
        dataType: "json"
    };
$("#J_uploadFile").bind({
            change: function () {
                var formdata = new FormData();
                $.each($('#J_uploadFile')[0].files, function (i, file) {
                    formdata.append('files', file);
                });
                $options.data=formdata;
                $options.success = function (result) {
                    console.log(result);
                };
                $.ajax($options);
            }
        });
</script>

angularjs，你可以使用angular-plupload.min.js 。 nodejs服务器，使用npm install formidable@latest nodejs代码

var formidable = require('formidable'),
http = require('http'),
util = require('util');

//use http module create http client 
http.createServer(function(req, res) {
  if (req.url == '/upload'&&req.method.toLowerCase() === 'post') {
    // get file
   var form = new formidable.IncomingForm();

  form.parse(req, function(err, fields, files) {
    res.writeHead(200, {'content-type': 'text/plain'});
    res.write('received upload:\n\n');
    res.end(util.inspect({fields: fields, files: files}));
  });

  return;
 }

}).listen(8080);