ng2 file upload 使用記錄

2022-01-16 07:18:20 字數 1463 閱讀 8758

最近這兩周一直在修bug,修的很是痛苦,不過痛苦也是件好事,不然每天都是在做同樣的事情,沒有什麼挑戰,工作多無聊呀! 是吧。

大致說一下背景吧:

這個專案是兩年前開新專案,到現在一直還在開發中,一直不停的向裡邊加新功能。

復用以前的實現,大致拿過來就用

或者把以前的元件改一改直接用

這次前人用的是第一種,直接用前人的前人引進來的元件庫。稍作修改就直接用, 基本沒什麼問題。主流瀏覽器都是ok的。但是有個坑爹的ie不能不考慮.

測試人員在ie上測發現了bug:

我們在上傳檔案的時候,會有乙個遮罩,等上傳成功之後,這個遮罩會消失, 但是在ie裡卻不會消失,導致檔案上傳成功,遮罩依舊還在。

本人前端菜鳥乙個,當時很慌,準備把這個問題給我們組裡的前端大牛去處理,無奈大牛比較忙。於是開始了探索之旅。

這個初始化**

this.uploader = new fileuploader();
上傳檔案**

this.uploader.queue.foreach(item => ;

// handle some other logic

***************

} else

解釋一下**:

獲取檔案上傳的佇列,遍歷佇列元素,進行max file size 的檢查, 上傳檔案,開啟遮罩。

訂閱檔案上傳完成事件:清空上傳佇列(這裡沒有設定multiple),關閉遮罩

這個**在其他瀏覽器裡是沒有問題的,但是在ie裡會出現這麼一種情況:

一次click 會觸發兩次的檔案上傳邏輯的**。 導致item.oncomplete = (response: string, status: number) => );訂閱開始上傳每個檔案的事件: 開啟遮罩

this.uploader.onbeforeuploaditem = () => // 開啟遮罩;
this.uploader.oncompleteitem = (item, response, status) =>
訂閱檔案新增失敗的事件,也就是檔案大於max file size 的事件

this.uploader.onwhenaddingfilefailed = () =>
按鈕點選的時候直接file upload all 就行了,其他的全交給訂閱的事件去處理了

this.uploader.uploadall();
問題就樣莫名其妙的消失了。 所以寫**要堅持用優雅的姿勢,能少些一行**,就少寫一行,bug的機率也會下降一點。

FileUpload簡單使用

fileupload 檔案上傳元件 官方使用說明 using.html 以下是個人的簡單使用 判斷是否有上傳請求 if servletfileupload.ismultipartcontent request 開始時的一般設定 建立檔案工廠 diskfileitemfactory diskfilei...

使用FileUpload上傳檔案

下面是fileupload上傳的基本步驟 1 建立磁碟工廠 diskfileitemfactory factory new diskfileitemfactory 2 建立處理工具 servletfileupload upload new servletfileupload factory 3 設定...

ng2目錄說明

目錄說明 一 e2e 端到端的測試目錄 二 src 源 目錄。用 ngmodule宣告了乙個模組,在這個模組中 首先用delarations宣告了這個模組中有什麼東西。這裡只能宣告元件,指令,管道。imports 宣告要讓應用正常運轉,還需要什麼東西。也就是這個模組依賴的其他模組 browermod...