前言
input标签下将type="file"可以选择本地文件上传，但是默认样式不太美观，想着优化一下。
这是默认样式。
美化之路
bootstarp
bootstarp里似乎没有对文件上传样式优化，唯一提到相关内容的地方还是默认的样式
谷歌
谷歌搜索bootstarp input file,第二条给我推送了一个不错的样式，我们来看看效果
嗯，不错，效果高大上，就用这个了。
连接：这是demo地址
这个名叫bootstrap-inputfile的包应该是基于bootrarp样式写的，并且支持使用npm 命令导入,但是我在尝试按照教程导入之后，显示的效果还是跟原生一样，这说明我没有正确导入，因为教程是关于angularjs的实例，我尝试去谷歌找关于angular的使用教程，有npm官网关于他的使用教程，我尝试执行，但是有一步引入没有见过相关文件，上网一查原来是angularjs的文件。,遂放弃。
angular
谷歌搜索关于angular bootstarp input file，搜索到了关于一个较官方的demo,
连接： angular-custom-file-input
demo提供了所有代码与实现效果。照着这个就能实现效果。
bootstrap-fileinput
在写博客的时候，我又尝试了一次安装bootstrap-fileinput,依旧是原样式。我去谷歌搜索anuglar use bootstarp-fileinput,找到了github的仓库地址，然后我去close issue里找angular相关内容，
虽说他用中文提的issue并且问的是提交问题,却从中透露出是可以使用的。
我找学长帮忙解决。
在此记录一下学长的解决过程。
首先学长先看了一下官方的导入教程。发现不太适用于angular项目。
教程第一步用link标签导入一些线上资源，我照做了。学长说用这种方式可能会有问题，如果地址变化，项目就崩溃了。最好用线下的，我用npm命令已经下载到线下了。只要照着bootstrap的步骤导入就可。下载后在angular.json引入相关包
"styles": [
"src/styles.scss",
"./node_modules/bootstrap/dist/css/bootstrap.css",
"./node_modules/bootstrap-fileinput/css/fileinput.css"
],
"scripts": [
"./node_modules/bootstrap-fileinput/js/fileinput.js",
"./node_modules/bootstrap-fileinput/js/plugins/piexif.js",
"./node_modules/bootstrap-fileinput/js/plugins/sortable.js",
"./node_modules/bootstrap-fileinput/js/locales/LANG.js",
] 引入后测试还是没有效果。
学长直接通过连接看了css的源码，如果用其中的一个样式的话，源码是执行的
但是其实css里的源码也没有过多的样式，学长猜测可能是js里的文件听过找到这个file类设置的效果。下面就是js文件没有实现的问题。
学长随便写了一个js文件，发现是可以实现js的。
然后看了一下sources,
发现也是成功导入了。
然后学长在index.html里使用，发现却是可以正常显示的
<body>
<input id="input-id" type="file" class="file" data-preview-file-type="text">
<app-root></app-root>
</body>
学长猜测可能是惰性加载的问题，然后把惰性加载去掉，在路由直接引用组件，发现成功实现。
上谷歌搜索一下问题，
解决办法是在惰性加载下直接import引入，效果实现成功。
缺陷
input输入file还是有一些不足
In this mode, you do not set the uploadUrl property. The plugin will use the native file input to store files and it can be read after a normal FORM submission (you must envelop the input within a FORM). This is useful for single file uploads OR simpler scenarios of multiple file uploads. Configuration is straightforward as you can read all data POSTED from a native form submission. However, note that the native file input is read only and cannot be modified or updated by external code. Especially for multiple file input selections, ONE cannot append files to an already selected file list. If one tries to select files on an already selected file input, it will overwrite and clear the previous selection. Similarly, one cannot selectively remove/delete files that have been added before upload in this mode.
像bootstrap-fileinput所说的一样，你用原生input标签虽然可以使用
multiple使一次可以选择多个文件，但是每次选择的文件总会覆盖掉上一次选择的文件。
教程也给了其他实现方式，Mode 2: Ajax Submission
感谢
在此感谢黄学长的帮助。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。