一石抡、項目需求
要求：
可通過點擊灰色區(qū)域打開系統(tǒng)的文件選擇器赐纱，或?qū)⑽募x擇窗口中的文件拖動到灰色區(qū)域?qū)崿F(xiàn)選擇文件；
文件在選擇中限制可選擇的文件類型并且不可選擇文件夾病涨；
選擇文件之后富玷，列表顯示選擇的文件【文件名+刪除按鈕】；
選擇文件后既穆，不立刻實現(xiàn)文件上傳赎懦，在用戶點擊確定按鈕之后，將文件以列表的方式上傳到后端幻工。
二励两、實現(xiàn)分析
首先我們的項目是angular并且使用ant-design的組件庫，所以選用ant-design 的upload 組件囊颅。
三当悔、問題：
1. 在打開文件進行選擇的時候傅瞻，我們發(fā)現(xiàn)，限制選擇文件類型并不是被系統(tǒng)完全限制的盲憎，它還是可選擇所有文件嗅骄。因此此處為了加強用戶體驗，我嘗試找了處理的方法：
【1】網(wǎng)頁中的打開文件行為實質(zhì)是瀏覽器觸發(fā)了文件選擇的事件饼疙；
【2】瀏覽器對象模型（BOM）的核心是window對象溺森；
【3】在谷歌瀏覽器的window對象，發(fā)現(xiàn)了 showOpenFilePicker() 方法窑眯；
【4】最后屏积，通過在mdn上的查找，發(fā)現(xiàn) showOpenFilePicker() 的作用如下：
我們可以通過將【excludeAcceptAllOption】值設(shè)為true伸但，來禁止對所有文件的選擇肾请。
2. 但是，這并沒有結(jié)束更胖；兼容性問題始終是程序處理的難題铛铁。
在實際項目中；如果項目對于瀏覽器的兼容性要求沒那么嚴格却妨，并且項目最終應(yīng)用到的瀏覽器屬于谷歌86版本及以上饵逐、Edge版本86及以上或者歐朋版本72及以上，那么我們可以嘗試使用這個方法來個性化定制打開文件選擇器的功能彪标。
————————————————
版權(quán)聲明：本文為CSDN博主「苛性鈉」的原創(chuàng)文章倍权，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明捞烟。
原文鏈接：https://blog.csdn.net/weixin_49392840/article/details/124882841
注意：1. 我遇到的項目是客戶端薄声，內(nèi)核是谷歌的83版本，因此當(dāng)時使用時直接報錯window下找不到這個方法题画。因此默辨，在不確定的情況下，我們可以查看一下瀏覽器的內(nèi)核及版本：
檢測原理： 客戶端瀏覽器每次發(fā)送 HTTP 請求時苍息，都會附帶有一個 user-agent（用戶代理）字符串缩幸，對于 Web 開發(fā)人員來說，可以使用用戶代理字符串檢測瀏覽器類型竞思。
注意：2.在 angular 組件中使用 Window.showOpenFilePicker() 時表谊，可能是因為語法檢測，不可以直接使用盖喷；需要用：(Window as any)將 winddow 進行一次類型轉(zhuǎn)換爆办。
————————————————
?———————————————— 版權(quán)聲明：本文為CSDN博主「苛性鈉」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議传蹈，轉(zhuǎn)載請附上原文出處鏈接及本聲明押逼。 原文鏈接：https://blog.csdn.net/weixin_49392840/article/details/124882841
