iT邦幫忙

0

[學習筆記] element ui upload 限制與提示

  • 分享至 

  • xImage
  •  

參考文章:Element UI 上傳檔案 el-upload —— 手動上傳檔案,限制上傳檔案數量,檔案型別校驗等

https://ithelp.ithome.com.tw/upload/images/20220214/20120722M5Q2h1qEjh.png

在上傳圖片時,可以透過 :limit 來做上傳檔案數量的限制
但被限制後想要有提示文字告知原因

可以透過 :on-exceed 來實作

:on-exceed 是需要與 :limit 一起的,無法單獨存在
因為自己單獨寫:on-exceed卻沒寫:limit,結果事件一直無法觸發,在那邊找原因找了很久 ???


// pug 
el-upload.upload(:action="上傳圖片的位置", list-type="picture" :limit="1" :on-exceed='exceedHandler')

// script
exceedHandler(){
   this.$message({
      message: '提示內容',
      type: 'error',
      offset: 200 // 偏離上面多少距離,有被其他元件擋住時可以調整顯示的位置
    });
}

https://ithelp.ithome.com.tw/upload/images/20220214/20120722SPgbApLEKv.png

所以當上傳的檔案超過限制的筆數時,結果就會類似這樣


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言