我如何在应用程序中使用 ng-file-upload(Angularjs 的新手)

Question

我在同时选择文件时尝试上传文件，我正在使用angularjs应用程序，我需要浏览文件并同时将其上传到表格行中。

<form>
         <input type="text" class="browse-form"placeholder="   Click browse to load documents " required>
         <button ngf-select="vm.uploadFiles($files)" mutiple accept=".csv,.pdf" class="browse-btn">Browse</button>
        </form>
        <p style="margin-top: -30px;"> Note:Supported file formats are word,excel and pdf only</p>
        <table class="table">
         <tr>
         <thead style="background:#fff;font-size: 13px;font-weight:bold;">
         <th>DOCUMENT NAME</th>
         <th>SIZE</th>
         <th>VERSION</th>
         <th>DATE UPLOADED</th>
         <th>UPLOADED BY</th>
         <th>ACTION</th>
         </thead></tr>
         <tr><td ng-repeat="uploading in files" style="font:smaller">{{uploading.name}}
         <span class="progress" ng-show="uploading.progress >=0">
         <div style="width:{{uploading.progress}}" ng-bind="uploading.progress + '%'">
         </div>
         </span>
          </td>
         </table>

我的控制器

(function () {
'use strict';
angular
.module('app',['ngFileUpload'])
.controller('ManageController', ManageController);
 ManageController.$inject=['$http','$scope','localStorageService','workspaceService','Upload','$timeout'];
 function ManageController($http,$scope,localStorageService,workspaceService,Upload,$timeout) {
    var vm = this;
    //uploading
    vm.uploadFiles=function(files){
    vm.files=files;
 angular.forEach(files,function(file){
  file.upload=Upload.upload({
      url:' ',
      data:{file:file}
  });
  file.upload.then(function(response){
      $timeout(function(){
          file.result=response.data;
      });
  });
  });
  }
  }
  })();

我已经在我的主索引中包含了ng-file-upload-shim.min.js和ng-file-upload.js的脚本.html作为一个脚本.....我仍然在我的应用程序中得到完全空白的屏幕，指出ngFileUpload拼写错误。

Answer 1

在 html 中只需添加以下代码。

<button class="btn btn-danger active" ngf-select="upload($file)">Upload</button>

在控制器中，您可以这样做。

$scope.upload = function (file) {
  if(file){
   try{        
    var token = 'token if required' ; // optional field
    Upload.upload({
        url: 'enter url to hit api',
        data: {file: file, 'username': $scope.username},
        headers: {'Authorization': 'JWT ' + token},
    }).then(function onSuccess(response) {
        console.log("success");
    }).catch(function onError(response) {
        console.log("error",response);
    });
  }catch(error){
    console.log(error.message);
  }
}

};

试试吧。它对我有用.. :)