文件上传在 AngularJS 中不起作用

Question

这是我的控制器文件中的代码，假设获取每个输入元素（名称、价格、日期、图像）的值并将其推送到对象数组中...

$scope.addBook = function(name, price, date, image) {

        name = $scope.name;
        price = $scope.price;
        date = $scope.date;
        image = $scope.image;

      $scope.products.push({
            name: name,
            price: price,
            pubdate: date,
          cover: image,
            likes: 0,
            dislikes: 0
        });


      };

这是我的 index.html

      <form>


        <input id="name" ng-model="name" type="text" placeholder="Book Title">
        <input id="price" ng-model="price" type="text" placeholder="Enter Book Price">
        <input id="date" ng-model="date" type="date" placeholder="Publication Date">

        <input type="file" ng-model="image"/>

        <input ng-click="addBook()" type="submit" value="Submit">
      <form>

我不确定为什么代码不起作用。当我执行 addBook() 函数时，我没有收到任何错误消息。

Answer 1

这是 ng-file-upload 的工作原理

<!--Upload on form submit or button click-->
<form ng-app="fileUpload" ng-controller="MyCtrl" name="form">
    Single Image with validations
    <div class="button" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'"
    ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100"
    ngf-resize="{width: 100, height: 100}">Select</div>
    <button type="submit" ng-click="submit()">submit</button>
</form>

控制器

app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) {
    // upload later on form submit or something similar
    $scope.submit = function() {
        if ($scope.form.file.$valid && $scope.file) {
            $scope.upload($scope.file);
        }
    };
    $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);
        });
    };
}]);

看看documentation

文件上传在 AngularJS 中不起作用

File upload not working in AngularJS

html

javascript

angularjs

angular-file-upload