一、项目需求
要求：
可通过点击灰色区域打开系统的文件选择器，或将文件选择窗口中的文件拖动到灰色区域实现选择文件；
文件在选择中限制可选择的文件类型并且不可选择文件夹；
选择文件之后，列表显示选择的文件【文件名+删除按钮】；
选择文件后，不立刻实现文件上传，在用户点击确定按钮之后，将文件以列表的方式上传到后端。
二、实现分析
首先我们的项目是angular并且使用ant-design的组件库，所以选用ant-design 的upload 组件。
三、问题：
1. 在打开文件进行选择的时候，我们发现，限制选择文件类型并不是被系统完全限制的，它还是可选择所有文件。因此此处为了加强用户体验，我尝试找了处理的方法：
【1】网页中的打开文件行为实质是浏览器触发了文件选择的事件；
【2】浏览器对象模型（BOM）的核心是window对象；
【3】在谷歌浏览器的window对象，发现了 showOpenFilePicker() 方法；
【4】最后，通过在mdn上的查找，发现 showOpenFilePicker() 的作用如下：
我们可以通过将【excludeAcceptAllOption】值设为true，来禁止对所有文件的选择。
2. 但是，这并没有结束；兼容性问题始终是程序处理的难题。
在实际项目中；如果项目对于浏览器的兼容性要求没那么严格，并且项目最终应用到的浏览器属于谷歌86版本及以上、Edge版本86及以上或者欧朋版本72及以上，那么我们可以尝试使用这个方法来个性化定制打开文件选择器的功能。
————————————————
版权声明：本文为CSDN博主「苛性钠」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_49392840/article/details/124882841
注意：1. 我遇到的项目是客户端，内核是谷歌的83版本，因此当时使用时直接报错window下找不到这个方法。因此，在不确定的情况下，我们可以查看一下浏览器的内核及版本：
检测原理： 客户端浏览器每次发送 HTTP 请求时，都会附带有一个 user-agent（用户代理）字符串，对于 Web 开发人员来说，可以使用用户代理字符串检测浏览器类型。
注意：2.在 angular 组件中使用 Window.showOpenFilePicker() 时，可能是因为语法检测，不可以直接使用；需要用：(Window as any)将 winddow 进行一次类型转换。
————————————————
———————————————— 版权声明：本文为CSDN博主「苛性钠」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/weixin_49392840/article/details/124882841
