2018-10-26 Element Ui upload 圖片寬高的校驗

在調(diào)試圖片限制寬高時 出現(xiàn)了很多的問題 一開始我直接百度google, 發(fā)現(xiàn)都沒有這個問題.感覺這應(yīng)該是很常見的需求, element內(nèi)部沒有實現(xiàn), 也許是很簡單?網(wǎng)上都沒有此類問題.
到GitHub的issue里看, 確實有類似的問題, 但沒有系統(tǒng)的解決方法.一開始,我的思路就是按照常規(guī)的校驗方法去校驗, 由于js是沒有讀取圖片權(quán)限的, 在這里我使用了URL對象的URL.createObjectURL(file)方法, 其中包含一個表示參數(shù)中給出的對象的URL, 這個URL的生命周期和創(chuàng)建它的窗口中的document 綁定, 可以用于在瀏覽器上預(yù)覽本地圖片或者視頻.
但是既然是通過url讀取寬高就牽扯到圖片是否加載完畢的問題, 雖然是在本地創(chuàng)建一個圖片對象, 但創(chuàng)建還是有延遲問題.


image.png

打印出來可以看到是有延遲問題的

解決了文件讀取問題后我就能拿到圖片真實寬高了, 經(jīng)過反復(fù)的debug 我發(fā)現(xiàn)img.onload并沒有走, isSize也一直是false, 看來這種邯鄲學(xué)步的方法顯然行不通, 想到onload是異步的, 來不及走就return結(jié)束了這個方法, 其實最省事的辦法, 就是給圖片判斷加上1秒的延遲, 但這種做法顯然是在自掘墳?zāi)?所以還是需要拿到文件真實的加載完成狀態(tài), 所以想法異步操作一下, 讓onload之后再執(zhí)行isSize的判斷以及return, 于是我就增加回調(diào)函數(shù)使onload先執(zhí)行, 然后對isSize有賦值操作.代碼如下:


img

之后isSize確實被重新賦值, 也有了正確的提示, 但只是一閃而過, 并成功的上傳了???
雖然有錯誤提示 但還是上傳了
反復(fù)撓頭.jpg

一步步的開始debug了, 發(fā)現(xiàn)最后還是可以回到return的, 但是不知道原因, 接著又開始google了, 發(fā)現(xiàn)我的思路是錯的.我發(fā)現(xiàn)beforeAvatarUpload其實是返回一個Promise
我在查看了一篇文章后, 發(fā)現(xiàn)Element Ui的upload人家內(nèi)部確實是想要一個promise, 直接給isSize一個boolean值return出去其實是沒有任何作用的, 這就解釋了為什么可以彈出錯誤信息卻可以成功上傳了, 這個是開始的實現(xiàn)方法
再后來我通過查看源碼之后發(fā)現(xiàn)this.beforeUpload是一個真正的promise, 也就是說必須返回一個promise, 簡單的boolean值是沒用的, 因為Element組件內(nèi)部還有很多的對promise的實現(xiàn).
這下清楚了一點, 就有了最終的方法, 經(jīng)過多次測試終于可以了.

beforeAvatarUpload(file) {
        this.filterType = []
        if (this.pType) { // 判斷父組件傳過來的可上傳圖片類型
          const typeArr = this.pType
          for (const i in typeArr) {
            this.filterType.push(this.imgType[typeArr[i]])
          }
        } else { // 如果沒有直接賦值為默認(rèn)
          this.filterType = this.imgType
        }
        let typeFlag = false
        for (const o in this.filterType) {
          if (this.filterType[o] === file.type) {
            typeFlag = true
          }
        }
        const isLt1M = file.size / 1024 / 1024 < 1
        if (!typeFlag) {
          this.$message.error('上傳圖片只能是 ' + this.filterType + ' 格式!')
        }
        if (!isLt1M) {
          this.$message.error('上傳圖片大小不超過 1MB')
        }
        const _width = 210
        const _height = 100
        const isSize = new Promise(function(resolve, reject) {
          const _url = URL.createObjectURL(file)
          const img = new Image()
          if (1) { // 是否判斷寬高
            img.onload = function() {
              const valid = img.width === _width
              valid ? resolve() : reject()
            }
          } else {
            resolve()
          }
          img.src = _url
        }).then(() => {
          return true
        }, () => {
          this.$message.error('上傳的尺寸必須是寬:' + _width + 'px 高:' + _height + 'px')
          return Promise.reject()
        })
        return typeFlag && isLt1M && isSize
      }

當(dāng)然 我這里寬高為固定的寬高, 在實際代碼中可以是子組件傳過來的, 如果沒有傳值也可以不限制, 判斷那里我還沒有寫.這個功能看似很簡單很簡單, 但是其實牽扯到promise異步調(diào)用返回值, 由于以前異步基本都用在ajax請求, 并沒有在別的地方用過, 所以花些時間學(xué)習(xí)了一下.

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末抵卫,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌霎槐,老刑警劉巖魏宽,帶你破解...
    沈念sama閱讀 221,635評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件编兄,死亡現(xiàn)場離奇詭異着逐,居然都是意外死亡倘潜,警方通過查閱死者的電腦和手機(jī)砚婆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評論 3 399
  • 文/潘曉璐 我一進(jìn)店門械拍,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人装盯,你說我怎么就攤上這事坷虑。” “怎么了埂奈?”我有些...
    開封第一講書人閱讀 168,083評論 0 360
  • 文/不壞的土叔 我叫張陵迄损,是天一觀的道長。 經(jīng)常有香客問我账磺,道長芹敌,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,640評論 1 296
  • 正文 為了忘掉前任垮抗,我火速辦了婚禮氏捞,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘冒版。我一直安慰自己液茎,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 68,640評論 6 397
  • 文/花漫 我一把揭開白布辞嗡。 她就那樣靜靜地躺著捆等,像睡著了一般。 火紅的嫁衣襯著肌膚如雪续室。 梳的紋絲不亂的頭發(fā)上楚里,一...
    開封第一講書人閱讀 52,262評論 1 308
  • 那天,我揣著相機(jī)與錄音猎贴,去河邊找鬼班缎。 笑死,一個胖子當(dāng)著我的面吹牛她渴,可吹牛的內(nèi)容都是我干的达址。 我是一名探鬼主播,決...
    沈念sama閱讀 40,833評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼趁耗,長吁一口氣:“原來是場噩夢啊……” “哼沉唠!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起苛败,我...
    開封第一講書人閱讀 39,736評論 0 276
  • 序言:老撾萬榮一對情侶失蹤满葛,失蹤者是張志新(化名)和其女友劉穎径簿,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體嘀韧,經(jīng)...
    沈念sama閱讀 46,280評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡篇亭,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,369評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了锄贷。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片译蒂。...
    茶點故事閱讀 40,503評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖谊却,靈堂內(nèi)的尸體忽然破棺而出柔昼,到底是詐尸還是另有隱情,我是刑警寧澤炎辨,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布捕透,位于F島的核電站,受9級特大地震影響碴萧,放射性物質(zhì)發(fā)生泄漏激率。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,870評論 3 333
  • 文/蒙蒙 一勿决、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧招盲,春花似錦低缩、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至顶籽,卻和暖如春玩般,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背礼饱。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評論 1 272
  • 我被黑心中介騙來泰國打工坏为, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人镊绪。 一個月前我還...
    沈念sama閱讀 48,909評論 3 376
  • 正文 我出身青樓匀伏,卻偏偏與公主長得像,于是被迫代替她去往敵國和親蝴韭。 傳聞我的和親對象是個殘疾皇子够颠,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,512評論 2 359