angularjs使用组件上传文件答案

【问题标题】：angularjs upload file using componentsangularjs使用组件上传文件
【发布时间】：2016-08-31 03:37:45
【问题描述】：

我正在尝试使用角度组件结构上传文件，但我无法获取所选文件。

第 1 步：模板数据。

<form name="form">
    Hello {{vm.name}} <br />
    Upload:     <input my-directive type="file" name="file" ng-model="files" /> <br />
    <input type="button" ng-click='vm.uploadFile()' value="Upload File." />
</form>

第2步：js文件合并后的样子

'use strict';
angular.module('app', ['ngFileUpload']);


class TestController {

    constructor(){
        this.name = 'user';
    }

    getFiles(selectedFiles){
        console.log('Selected files are : ' + JSON.stringify(selectedFiles));
        this.files = selectedFiles; // results empty data.
    }

    uploadFile (){
        console.log('Model data i.e. files consists of : ' +  JSON.stringify(this.files));
          // Upload code will do later.
    }

}


angular.module('app').directive('myDirective', function () {
    return {
        restrict: 'A',
        scope: true,
        link: function (scope, element, attr) {

            element.bind('change', function () {
                console.log('Value of element is :' + JSON.stringify(element[0].files[0]));              
            });

        }
    };
});

//Created a test controller here.
angular.module('app').controller('TestController', TestController);

// Created a component here.
angular.module('app').component('test', {
  templateUrl: 'test.html',
  controller: TestController,
  controllerAs : 'vm',
});

在此先感谢，我是 Angular 的新手 :)

【问题讨论】：

你能把这个放在 Codepen 里吗？
好的。我没用过，但会试试！
Codepen 真的很简单。完成后发表回复，以便我收到通知，我会看看。
试试这个链接codepen.io/manish0731582008/pen/EKGRyQ?editors=0011
如果您在访问链接时遇到任何问题，请告诉我。

标签： angularjs file upload components

【解决方案1】：

抱歉，我没有注意到您使用的是打字稿。我还没有真正跟上 ts 的速度。前几天我用下面的代码回答了一个我现在找不到的类似问题。请注意，ng-model 和文件输入类型存在问题，因此它使用 document.getElementById 来找出文件。我怀疑这个问题是你遇到的。

<html>
<body>
  <form name="form" ng-app="app" ng-controller="Ctrl as ctrl">
    Upload file:
    <input type="file" id="file" ng-model="ctrl.file" />
    <br/>
    <br/> Enter text:
    <textarea id="textarea" ng-model="ctrl.text"></textarea>
    <br/>
    <br/>
    <button class="btn btn-primary btn-large" ng-click="ctrl.submitForm()">Submit</button>
  </form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js">

</script>
<script>
  angular.module('app', []).controller('Ctrl', function() {

  var vm = this;
  vm.file = ""
  vm.text = ""

  vm.submitForm = function() {
    // angular doesn't update the model for input type="file"
    vm.file = document.getElementById('file').value;
    var retVal = false ;
    alert(vm.file);
    alert(vm.text);
    if (vm.file && ! vm.text) 
      {retVal = true}
    else if (vm.text && ! vm.file) 
       {retVal = true}
    else if (!vm.text && !vm.file) 
      {retVal = false}
    else if (vm.text && vm.file) 
      {retVal = false}

    if (!retVal) {
      alert("Please specify either a file or text, not both!")
    } else
      alert("ok")
  }
});

</script>

</html>

【讨论】：

这个答案也有几个很好的解决方案：stackoverflow.com/questions/32220888/…