AngularJS照片/文件上传

Question

Uploading file and photo seems to be working fine on other browsers apart from FF. It seems to be its failing somewhere in the form.append but I don't get why its working on Chrome and IE but not FF.

Can someone shed a light on this one please.

controller:

$scope.uploadProfilePhoto = function() {
            $timeout(function(){
                var form = new FormData();
                form.append("fileName", vm.profilePhoto.fileName);
                form.append('file', vm.profilePhoto.file);
                ProfileService.uploadProfilePicture(form)
                    .then(function(response){
                        vm.ProfilePictureUrl = api.getQualifiedUrl('image/' + response.data.ImageId);
                    })
            });
        }

Input:

<label for="profilePhoto" class="photo-upd" >
  <img data-ng-src="{{vm.ProfilePictureUrl}}" id="profile-picture_image" alt="Candidate profile photo" onchange="angular.element(this).scope().uploadProfilePhoto(this)" class="img-responsive">                        
  <span><i class="fa fa-upload"></i> Upload Photo</span>
</label>
<input id="profilePhoto" type="file" name="profilePhoto" valid-file data-oh-file fileread="vm.profilePhoto.file" filename="vm.profilePhoto.fileName" class="hidden"onchange="angular.element(this).scope().uploadProfilePhoto(this)">

Error:

vm.profilePhoto is undefined
Profile/$scope.uploadProfilePhoto/

Answer 1

您不应该在上传功能中使用$ scope.vm吗？

Answer 2

I just notice that the vm object must be the self or this of the object/controller.

And you need to declare the vm.profilePhoto object as well:

 var vm = this; vm.profilePhoto = {}; 

JS:

example here:

https://jsfiddle.net/alvarojoao/v9rfn301/

var app = angular.module("turingApp", []);

app.controller("turingController", ["$scope","$timeout", function($scope,$timeout) {
    var vm = this;
    vm.profilePhoto = {};

  $scope.uploadProfilePhoto = function() {
    $timeout(function() {
      var form = new FormData();
      form.append("fileName", vm.profilePhoto.fileName);
      form.append('file', vm.profilePhoto.file);
      ProfileService.uploadProfilePicture(form)
        .then(function(response) {
          vm.ProfilePictureUrl = api.getQualifiedUrl('image/' + response.data.ImageId);
        })
    });
  };

}]);