Мне нужно загрузить файл на сервер, используя angularJS, NodeJS и ExpressJS - PullRequest
Новая
       29

Мне нужно загрузить файл на сервер, используя angularJS, NodeJS и ExpressJS

0 голосов
/ 04 июня 2018

Я попытался перейти по этой ссылке https://ciphertrick.com/2015/12/07/file-upload-with-angularjs-and-nodejs/, но получил ошибку

Версия узла 4.4.7, ошибка modulerr в ngFileUpload

Для загрузки файла в app.js 

        var multer = require('multer');
        var storage = multer.diskStorage({ //multers disk storage settings
         destination: function (req, file, cb) {
        cb(null, '../../../../uploads/')
    },
    filename: function (req, file, cb) {
        //var datetimestamp = Date.now();
       // cb(null, file.fieldname + '-' + datetimestamp + '.' + file.originalname.split('.')[file.originalname.split('.').length - 1])
        cb(null, file.originalname)
    }
});
var upload = multer({ //multer settings
    storage: storage
}).single('file');

Путь API для загрузки файлов 

app.post('/upload', function (req, res) {
    upload(req, res, function (err) {
        console.log("inside upload");
        if (err) {
            console.log("inside upload err");
            res.json({ error_code: 1, err_desc: err });
            return;
        }
        res.json({ error_code: 0, err_desc: null });
    })
});

Угловой контроллер 

    .module('CIController', ['ngMaterial', 'ngAnimate', 'ngAria', 'ngMessages', 'Alertify', 'ngFileUpload',])

    .controller('childController', ['$scope', '$location', '$q', '$timeout', '$log', 'CIFactory', 'ClientConfig', 'Alertify', 'Upload', '$window', function ($scope, $location, $q, $timeout, $log, CIFactory, ClientConfig, Alertify, Upload, $window) {
.....
$scope.submitfile = function () { //function to call on form submit
            if ($scope.indexForm.$valid && $scope.BuildModel.file) { //check if from is valid
                var isuploaded = $scope.uploadfiletoserver($scope.BuildModel.file); //call upload function
            }
        }
        $scope.uploadfiletoserver = function (file) {
            Upload.upload({
                url: '/upload', //webAPI exposed to upload the file
                data: { file: file } //pass file as data, should be user ng-model
            }).then(function (resp) { //upload function returns a promise
                if (resp.data.error_code === 0) { //validate success
                    console.log("inside upload controller");
                    $window.alert('Success ' + resp.config.data.file.name + 'uploaded. Response: ');
                    return ClientConfig.BOOL_TRUE;
                } else {
                    $window.alert('an error occured');
                    return ClientConfig.BOOL_FALSE;
                }
            }, function (resp) { //catch error
                console.log('Error status: ' + resp.status);
                $window.alert('Error status: ' + resp.status);
                return ClientConfig.BOOL_FALSE;
            }, function (evt) {
                console.log(evt);
                var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
                $scope.progress = 'progress: ' + progressPercentage + '% '; // capture upload progress
            });
        };

В HTML 

<form name="indexForm" invalidfieldfocus novalidate id="indexForm" autocomplete="off" enctype="multipart/form-data">
    <div>
        <input type="file"                                                                ngf-select                                                                           ng-model="$parent.BuildModel.file"                                                                           name="file" ngf-max-size="20MB" />                                                                
        <i ng-show="indexForm.file.$error.required">*required</i><br>
        <i ng-show="indexForm.file.$error.maxSize">File too large                                                                        {{indexForm.file.size / 1000000|number:1}}MB: max 20M
        </i>                                                                
        <p>{{indexForm.file.progress}}
 </div>

1 Ответ

0 голосов
/ 08 июня 2018

Теперь ошибки нет.

  1. Убедитесь, что ng-file-upload все файлы JavaScript включены в HTML.

  2. ВключитеЗагрузите ngFileUp в контроллер, как я дал выше в части кода.

  3. Установите ng-multer и напишите требуемую функцию, как показано выше, и путь, который мы упомянули, должен иметь папку, уже созданную, иначевыдает ошибку.

...