angularjs mvc中的文件上传

Question

请查看以下代码，让我知道如何将文件上传到我的项目文件夹中。 我在哪里可以写网址？我选择了文件，但它并没有通过单击更新按钮来保存。

提前致谢 里亚

var DocTrack = angular.module('DocTrack', []);

DocTrack.controller('DocumentController', DocumentController);

DocTrack.directive('fileModel', ['$parse', function ($parse) {
    return {
        
        restrict: 'A',
        link: function (scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function () {
                scope.$apply(function () {
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

DocTrack.service('fileUpload', ['$http', function ($http) {
    debugger;
    this.uploadFileToUrl = function (file, uploadUrl) {
        var fd = new FormData();
        fd.append('file', file);
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: { 'Content-Type': undefined }
        })
        .success(function () {
            alert('File Uploaded Successfully...');
        })
        .error(function () {
            alert('File has not been uploaded');
        });
    }
}]);

DocTrack.controller('DocumentController', ['$scope', 'fileUpload', function ($scope, fileUpload) {

    $scope.uploadFile = function () {
         debugger;
        var file = $scope.myFile;
        console.log('file is ' + JSON.stringify(file));
    
        var uploadUrl = "http://localhost:40966/fileUpload";
        fileUpload.uploadFileToUrl(file, uploadUrl);
    };
}]);

      <div ng-controller = "DocumentController">
           <input type="file" file-model="myFile" />          
           <button ng-click="uploadFile()" data-url="">upload me</button>            
        </div>

Answer 1

 var uploadUrl = "http://localhost:40966/fileUpload";

您能否检查您的后端网址，它必须与您指定的相同，并且在保存图像期间您必须指定将图像存储在后端的路径。

Answer 2

html格式

<div class="form-group col-xs-12 ">
  <label class="form-group">Select file</label>
  <div class="controls">
     <input type="file" file-model="fileUrl"/>
  </div>
</div>

在 Controller.js 中输入以下代码

   var file = $scope.fileUrl;
   var uploadUrl = "/Uploadfile";
   var data = fileUpload.uploadFileToUrl(file, uploadUrl,formdata);
};

为您服务

.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file, uploadUrl,formdata){
        var fd = new FormData();
        fd.append('file', file);
        fd.append('formdata',angular.toJson(formdata));
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(data){
          console.log(data);
          return data;
      })
        .error(function(){
        });
    }
}]);

.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}])

"/Uploadfile" 是您的后端网址