限制file上傳型別

很多時候，我們都需要使用
<input type="file">
進行檔案上傳。
在上傳的時候，我們需要對檔案型別進行限制。
如果上傳圖片的時候。
使用者只能夠限制使用者上傳 
.jpeg,  .png,   .gif,  .bmp,  .jpg, .webp

圖片型別說明，特別是webp

1、jpg（jpeg）：這是一種可以高度保留圖片色彩資訊的格式
2、png：該型別的圖片可以實現透明
3、gif：圖片所佔體積小，可以實現動圖
4、webp是一種支援有失真壓縮和無失真壓縮的圖片檔案格式

我想給大家分享一下webp這一種圖片格式； webp
可能有些小夥伴是第一次看見這種格式 
webp（發音：weppy）是由谷歌於2010年推出的新一代圖片格式，
它同時提供了有失真壓縮與無失真壓縮（可逆壓縮）；
我們使用webp 圖片優勢：
它具有更優的影象資料壓縮演算法，能帶來更小的圖片體積；
擁有肉眼識別無差異的影象質量；
具備了無損和有損的壓縮模式。
因為可以進行大幅度的壓縮，向京東、淘寶都是大量使用這種格式的圖片
 

accept 屬性的使用

<template>
    <div>
        <input type="file" title=""  accept=".jpeg,.png, .gif,.bmp,.jpg">
    </div>
</template>

我們可以發現使用者只能夠選擇我們規定的圖片型別了
但是細心的小夥伴會發現
當我們選擇[所有檔案的時候]我們限制的檔案型別就失效了
這個時候就很尷尬了。
經過我查閱文件，
並沒有很好的辦法去處理使用者不去選擇[所有檔案的時候]
這個時候我們還得使用js去檢測使用者上傳的檔案型別
 

檢測優化上傳的檔案型別

<template>
    <div>
        <input type="file" @change="funHander($event)"
         accept=".jpeg,.png, .gif,.bmp,.jpg">
    </div>
</template>

<script>
export default {
  setup () {
    function funHander(e){
    
        let fileName=e.target.files[0].name;
        console.log('檔案上傳的名稱',fileName);
        
        // pop() 方法用於刪除並返回陣列的最後一個元素
        // 獲取檔案的字尾需要注意這樣的檔案型別 xxx.aaa.aaa.aaa.aaa.aa
        // 這樣的檔名稱必須獲取最後一個.[點]結束的，才能精確知道該檔案的型別
        let fileType=fileName.split(".").pop();
        
        console.log( '檔案型別',fileType)
        let arr=['jpeg','png','gif','bmp','jpg'];
        // 如果我們可以查詢到對應檔案型別，
        // 說明使用者選擇正確[true]，否者錯誤[false]
        let typeRight=arr.indexOf(fileType)==-1 ? false :true;
        if(!typeRight){
          alert('檔案型別錯誤，請上傳jpeg,png,gif,bmp,jpg')
        }
        
    }
    return {funHander}
  }
}
</script>
 

這樣我們就可以很好的去解決使用者選擇的檔案型別了。
使用者上傳正確就可以上傳點選上傳按鈕，
否者就清空使用者上傳的檔案內容，並提示使用者

實現上面的功能

<template>
    <div>
        <input type="file" @change="funHander($event)" 
         ref="fileinput"  accept=".jpeg,.png, .gif,.bmp,.jpg">
        <button> 上傳</button>
    </div>
</template>

<script>
import {ref} from 'vue'
export default {
  setup () {
    let fileinput=ref();
    
    function funHander(e){
        let fileName=e.target.files[0].name;
        console.log('檔案上傳的名稱',fileName);
        
        // pop() 方法用於刪除並返回陣列的最後一個元素
        // 獲取檔案的字尾需要注意這樣的檔案型別 xxx.aaa.aaa.aaa.aaa.aa
        // 這樣的檔名稱必須獲取最後一個.[點]結束的，才能精確知道該檔案的型別
        let fileType=fileName.split(".").pop();
        console.log( '檔案型別',fileType)
        
        let arr=['jpeg','png','gif','bmp','jpg'];
        // 如果我們可以查詢到對應檔案型別，
        // 說明使用者選擇正確[true]，否者錯誤[false]
        let typeRight=arr.indexOf(fileType)==-1 ? false :true;
       
        if(!typeRight){
          alert('檔案型別錯誤，請上傳jpeg,png,gif,bmp,jpg')
          console.log(fileinput )
          fileinput.value='';//清空檔案
        }
    }
    return {funHander,fileinput}
  }
}
</script>

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注博主，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，所以如果你心情還比較高興，也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾！

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！