使用 angular-file-upload 将文件上传到节点服务器答案

【问题标题】：Upload file to node server with angular-file-upload使用 angular-file-upload 将文件上传到节点服务器
【发布时间】：2022-02-14 01:05:15
【问题描述】：

对不起我的英语。我正在使用 MEAN 堆栈来编写我的应用程序。我找到了一些用于上传图像的模块，而 angular-file-upload 是我的选择。但是当我上传图片时，控制台上的百分比显示完成了。我正在检查上传目录。文件已上传，但无法在 Image Viever 中读取。

这是我的角度代码：

        $scope.onFileSelect = function($files) {    
            for (var i = 0; i < $files.length; i++) {
                var file = $files[i];
                $scope.upload = $upload.upload({
                    url: '/posts/upload/',
                    method: 'POST',                 
                    file: file,
                }).progress(function(evt) {
                    console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
                }).success(function(data, status, headers, config) {
                    // file is uploaded successfully
                    console.log(data);
                });

            }
        };

这是我在 Node JS 上的代码：

         exports.upload = function(req, res) {      
                       var data = new Buffer('');
                          req.on('data', function(chunk) {
                          data = Buffer.concat([data, chunk]);
                       });
                       req.on('end', function() {
                              req.rawBody = data;     
                              fs.writeFile(config.root + path.sep + 'public/upload' +                    path.sep + uuid.v1(), data ,function(err){
                             if(err) throw err;
                              console.log('ok saved')

                       });
                       res.send('ok');

                    });
              }

我想我在 Node 上做错了，但我找不到。请告诉我我的错误。

【问题讨论】：

stackoverflow.com/questions/22877613/…

标签： node.js angularjs file-upload express

【解决方案1】：

您需要将上传图片的预览网址发送回 angular。

在服务器端

 req.on('end', function() {
     req.rawBody = data;
     var imgUrl = '/upload' + path.sep + uuid.v1();

     fs.writeFile(config.root + path.sep + 'public' + imgUrl, data ,function(err){
         if(err) throw err;

         //send back the preview url
         res.jsonp({
             imgUrl: imgUrl
         })
 });

客户端

 $scope.onFileSelect = function($files) {    
        for (var i = 0; i < $files.length; i++) {
            var file = $files[i];
            $scope.upload = $upload.upload({
                url: '/posts/upload/',
                method: 'POST',                 
                file: file,
            }).progress(function(evt) {
                console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
            }).success(function(data, status, headers, config) {
                // file is uploaded successfully
                console.log(data);
                $scope.imgurl = data.imgUrl;
            });

        }
    };

你可以这样显示图片

<img ng-src="{{imgurl}}" ng-show="imgurl" alt="preview for uploaded image" >

【讨论】：