天天看點

cube-ui 彈窗元件的用法_elementui的<elupload>元件實作檔案上傳,請注意!!

用element-ui 的 >元件實作檔案上傳,出現以下錯誤

cube-ui 彈窗元件的用法_elementui的<elupload>元件實作檔案上傳,請注意!!

原因很簡單,由于這個表單是在一個彈框裡面的,所有當彈框關閉時/的所有元件都不能再次引用,比如說file,file-list屬性時,就會出現undefined錯誤 ,是以在使用彈窗的時候一定要注意異步操作時先所有操作完畢才可以關閉彈框

什麼是異步操作?

同步指的是一次隻能完成一件任務。如果有多個任務,就必須排隊,前面一個任務完成,再執行後面一個任務,以此類推。

異步指的是每一個任務有一個或多個回調函數(callback),前一個任務結束後,不是執行後一個任務,而是執行回調函數,後一個任務則是不等前一個任務結束就執行,是以程式的執行順序與任務的排列順序是不一緻的、異步的。

常見的異步

1,點選時間,

2,定時器,

3,AJAX請求,

常見的操作方法

1,回調函數,這是異步程式設計最基本的方法。

2,事件監聽

3,釋出/訂閱

4,Promises對象

簡單總結一下了關于異步的知識點,以後的文章可以詳細介紹異步以及這四種關于異步的操作方法。接下來主要講element-ui 的 >元件實作檔案上傳出行的報錯。原因上面已經告訴大家,具體怎麼解決呢,先上圖。

這裡是一個el-upload元件

cube-ui 彈窗元件的用法_elementui的<elupload>元件實作檔案上傳,請注意!!
cube-ui 彈窗元件的用法_elementui的<elupload>元件實作檔案上傳,請注意!!

當我選擇上傳檔案點選确定自定義送出時,出現了報錯,

Uncaught TypeError: Cannot set property 'status' of undefined

cube-ui 彈窗元件的用法_elementui的<elupload>元件實作檔案上傳,請注意!!

點選确認之後,我們上傳檔案時,關閉了彈窗元件,清空了檔案清單。由于這個表單是在一個彈框裡面的,所有當彈框關閉時的所有元件都不能再次引用,是以出現了以上報錯。

解決辦法:

通過promise基本用法進行異步操作,就可以解決這個問題了。

Promise的基本用法:// resolve代表成功 reject失敗 都是一個函數let p = new Promise(function(reslove,reject){    //reslove('成功')  //狀态由等待變為成功,傳的參數作為then函數中成功函數的實參    reject('失敗')  //狀态由等待變為失敗,傳的參數作為then函數中失敗函數的實參})//then中有2個參數,第一個參數是狀态變為成功後應該執行的回調函數,第二個參數是狀态變為失敗後應該執行的回調函數。p.then((data)=>{    console.log('成功'+data)},(err)=>{    console.log('失敗'+err)})
           

根據上面所寫promise的基本用法來就解決我們的問題。

cube-ui 彈窗元件的用法_elementui的<elupload>元件實作檔案上傳,請注意!!

注意:this指向問題。

今天就給大家分享這麼多,如果有小夥伴有更好的方法,或者小編哪裡有問題歡迎大家指出,公衆号回複。

做最專業最懂你的前端開發平台,提供你最需要的開發學習資源。我們專注于前端開發技術的學習與交流,我們堅持,每天進步一小步,人生進步一大步!關注趣玩前端,與我們一起學習進步。

cube-ui 彈窗元件的用法_elementui的<elupload>元件實作檔案上傳,請注意!!