Question

我正在尝试使用AngularJS上传文件。这是我的代码：

HTML

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

的JavaScript

$scope.uploadFile = function(){
    var file = $scope.myFile;
    var uploadUrl = "http://admin.localhost/images/patanjali/";
    VariantService.uploadFileToUrl(file, uploadUrl);
};

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

虽然我可以在我的服务中看到（＆＃39;成功＆＃39;）警报，但该文件未保存在控制器中提供的位置。

有人能帮助我吗？缺少什么？

Answer 1

您的应用似乎正在使用code from this jfiddle：

myApp.service('fileUpload', ['$http', function ($http) {
    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 2

我有同样的问题。我尝试了下面的代码，我的问题解决了。

string(18) "äöü ä ö ü ß"

Answer 3

＆＃13;

$scope.setFiles = function (element) {
    $scope.$apply(function (scope) {
        $scope.files = [];
        for (var i = 0; i < element.files.length; i++) {
            scope.files.push(element.files[i])
        }
    });
};

$scope.uploadFile = function() {
    var fd = new FormData();

    for (var i in $scope.files) {
        fd.append('file', $scope.files[i])
    }

    $http.post('http://admin.localhost/images/patanjali', fd, {
        transformRequest: angular.identity,
        headers: {
            'Content-Type': undefined
        }
    })
    .then(function successCallback(response) {
        
    }, function errorCallback(response) {
        
    });
};

＆＃13;

<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js'></script>
<input type="file" valid-file ng-model-instant id="fileToUpload" onchange="angular.element(this).scope().setFiles(this)" />
<button ng-click="uploadFile()">Upload me</button>

＆＃13;

Answer 4

您可以将AngularJs模块用于文件上传器。这些模块非常实用且非常舒适。

1）https://github.com/nervgh/angular-file-upload

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

如何使用AngularJS上传文件？

4 个答案: