改变input上传样式，我的样式我做主！

最近在做一些小东西，想要写一个头像上传的功能，可是自带的input文件输入框，真的是不忍直视啊，只好自己做了，无从下手啊，只好自己琢磨组件库是怎么写的了，在这分享给大家。

没有对比就没有伤害啊，接下来看下对比

原生的写法 代码：<inpu type="file" name="file" accept="image/*">，原生的很丑，如果用过的话就会感受的到

华丽的转变 这就涉及到一种思维的转变。我们来分析一下。

1. 为什么会弹出文件输入框？ 如果知道它是触发了什么事件弹出的，应该可以尝试这改变样式，取代原来的样式，只让事件触发，照样可以弹出输入框不是吗。
2. 事实就是如此，只是input输入框接受了点击事件，然后弹出文件选择框。那么我们就可以隐藏input框，用新的样式来接受点击事件，然后在js代码中出发input的click事件，那么不久行了吗。样式怎么写还不是你自己说了算! 开始行动

我用的是angular语法，不会的请自行补习。我是为了方便
<div class="el-avatar" (click)="this.triggerInput()">;
  <p>请输入头像,可以自己设计样式</p> 
  <!-- 把input框隐藏掉，当触发click事件的时候，文件选择框会弹出 -->
  <input #fileInput (input)="this.acceptFile()" type="file" name="file" accept="image/*" style="display: none">
</div>;

ts代码
@ViewChild('fileInput') fileInput;

triggerInput() {
  this.fileInput.nativeElement.click(); // 触发input框的click事件
}

acceptFile() {
  const imageFile = this.fileInput.nativeElement.files[0];
}

// 把图片文件转换为base64格式， 在callback函数中获取结果
getBase64(file, callback) {
  const fileReader = new FileReader();
  fileReader.onload(callback(fileReader.result.toString())); // 加载文件读为base64格式
  fileReader.readAsDataUrl(file); // 读取文件
}


以上代码，只是说明一下如何去修改文件输入框的样式。好了，可以根据自己需求改变样式
复制代码