如何使用AngularJS上傳文件？

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

雖然我可以在我的服務中看到（“成功”）警報，但該文件未保存在控制器中提供的位置。

有人能幫我嗎？ 缺什么？

Answer 1

看起來你正在使用這個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

我有同樣的問題。 我嘗試了下面的代碼，我的問題解決了。

var req = {
    method: 'POST',
    url: url,
    headers: {
        'Content-Type': "application/json",
    },
    data: data,
    transformRequest: function(data, headersGetter) {
        var formData = new FormData();
        angular.forEach(data, function(value, key) {
            formData.append(key, value);
        });
        var headers = headersGetter();
        delete headers['Content-Type'];
        return formData;
    }
}

$http(req)
    .success(function(response) {
        $scope.Models = response;
    })
    .error(function(data, status, headers, config) {

        // called asynchronously if an error occurs
        // or server returns response with an error status.
        alert(data);
    });

Answer 3

 $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) { }); }; 

 <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> 

Answer 4

您可以將AngularJs模塊用於文件上傳器。這些模塊非常實用且非常舒適。

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

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