Angular中实现文件转BASE64

这是一个so easy的问题，主要是记录一下angular 的模板变量的使用和组件中匿名方法，箭头方法使用的区别

代码

模板文件

 <div nz-col [nzSpan]="3">
          <!-- 设置为 display: none ,因为 input看上去太丑 -->
          <input type="file" style="display: none" (change)="fileInputChange(fileInput)" multiple #fileInput />
          <!-- 因为 input 设置为不可见，所以需要给用户一个可以触发 input 的按键 -->
          <a (click)="choseIcon(fileInput)">
              <!-- img 的 src 属性绑定 组件的 icon属性的值，这个icon 属性就是转换后的base64串 -->
            <img alt="图标" [src]="icon" class="menu-icon">
          </a>
  </div>

组件代码

export class MenuEditComponent implements OnInit {
    icon = '';
    
    // 点击按键时触发 input的click方法 
    choseIcon(fileInput: any) {
        fileInput.click();
     }
    
    // 当选择文件后会进入这个方法 
     fileInputChange(fileInput) {
  		  const file = fileInput.files[0];
  		  const fileReader = new FileReader();
  		  fileReader.onload = ev => {
  		    const data = fileReader.result.toString();
  		    this.icon = data;
  		  };
   		 fileReader.readAsDataURL(file);
      }
}

要点

如何将模板中的 DOM对象作为参数传入方法

<input type="file" style="display: none" (change)="fileInputChange(fileInput)" multiple #fileInput />

这行代码最后的 #fileInput 代表在这个组件中定义一个变量 fileInput ,这个变量就代表了这个input对象，在使用时和使用模板变量没有差别，但是要注意定义这个模板变量的作用域，不是在你的组件中定义的，你这个组件就可以到处都能使用的，如是你使用了一个第三方的组件，这个组件允许你在组件标签内写一些模板代码，如是你在这个第三方组件的内部定义的这个引用变量，这个第三方组件的外部就不能用这个引用变量

除了可以将标签元素赋值给模板引用变量外，还可以将一个组件引用赋值给模板引用变量（如是这个组件/指令导出了），[官方例子]['https://angular.cn/guide/forms#show-and-hide-validation-error-messages']

<label for="name">Name</label>
<input type="text" class="form-control" id="name"
       required
       [(ngModel)]="model.name" name="name"
       #name="ngModel">
<div [hidden]="name.valid || name.pristine"
     class="alert alert-danger">
  Name is required
</div>

这一行代码[(ngModel)]="model.name" name="name" #name="ngModel" 前面是双向绑定没什么可说的，后面#name="ngModel 意思是将当前这个指令的的对象赋值给 name 变量，然后在这一行 <div [hidden]="name.valid || name.pristine" class="alert alert-danger">使用时，可以通过 name变量访问更多的参数，比如这个input 是否被点过(touch)，是否被赋值过（dirty）等等;

在组件中使用箭头函数与匿名函数的区别

区别主要在于上下文的this指向的目标不一样

箭头函数中的this 指向的是这个组件实例，匿名方法指向的是这个方法的调用方

  fileInputChange(fileInput) {
  		  const file = fileInput.files[0];
  		  const fileReader = new FileReader();
  		  fileReader.onload = ev => {
  		    const data = fileReader.result.toString();
  		    this.icon = data;
  		  };
   		 fileReader.readAsDataURL(file);
      }

这个方法中 fileReader 的 onload方法如果这样写

  fileReader.onload = function(ev) {
  		    const data = fileReader.result.toString();
  		    this.icon = data;
  		  };

那么 this 指的就是fileReader,因为是这个对象调用了它自己的onload,也就是这个匿名方法;这时页面上不会体现出你选择了新的图片，因为你没有为组件的 icon属性赋值，而是给fileReader的icon属性赋值了

如是使用箭头函数，那么this指的就是组件本身

来源：oschina

链接：https://my.oschina.net/u/4080299/blog/3153178

标签

base64

angular

fileinput