Question

我试用保存在本地项目文件夹中使用角度，我没有正确的代码任何人把它你的解决方案帮助我更多，然后我的代码在这里

    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(){
    })
    .error(function(){
    });
    }

Answer 1

这是上传文件的示例代码。您可以使用此示例进行尝试。

<html>

<head>
  <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body ng-app = "myApp">

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

  <script>
     var myApp = angular.module('myApp', []);

     myApp.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]);
                 });
              });
           }
        };
     }]);

     myApp.service('fileUpload', ['$https:', function ($https:) {
        this.uploadFileToUrl = function(file, uploadUrl){
           var fd = new FormData();
           fd.append('file', file);

           $https:.post(uploadUrl, fd, {
              transformRequest: angular.identity,
              headers: {'Content-Type': undefined}
           })

           .success(function(){
           })

           .error(function(){
           });
        }
     }]);

     myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
        $scope.uploadFile = function(){
           var file = $scope.myFile;

           console.log('file is ' );
           console.dir(file);

           var uploadUrl = "/fileUpload";
           fileUpload.uploadFileToUrl(file, uploadUrl);
        };
     }]);

  </script>

Answer 2

Hey Kalithas KN，欢迎来到StackOverflow。

对于文件上传，我发现以下Angular JS库最适合我

https://github.com/danialfarid/ng-file-upload

上传方法看起来像这样

if let likeStatus = location.userLocationLike {

    switch likeStatus.likeStatusId {
        case 1: view.lblLike.text = "LIKED"
        case 2: view.lblLike.text = "OKAY"
        case 3  view.lblLike.text = "DISLIKE"
        default: view.lblLike.text = "LIKE"
    }
}

在你的模板中，你会做这样的事情

$scope.upload = function (file) {
    Upload.upload({
        url: 'upload/url',
        data: {file: file, 'username': $scope.username}
    }).then(function (resp) {
        console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
    }, function (resp) {
        console.log('Error status: ' + resp.status);
    }, function (evt) {
        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
        console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
    });
};

此外，该库可以处理拖放文件上传，我认为这是一个很好的补充。

我希望这会有所帮助。如果您需要更多说明，请告诉我。

如何使用角度js在本地/项目文件夹中保存/上传图像？

2 个答案: