javascript - 如何从本地文件夹(磁盘存储)读取或获取图像文件并使用nodejs服务器将其发送到Angularjs？

Question

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

HTML

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

Angular 代码:

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

Node 服务器代码:

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 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@latestNode.js代码

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