input type=“file” 選擇特定的文件格式 進行上傳

<input id="addImg"
                     type="file"
                     @change="getFileToPicture($event)"
                     multiple="multiple"
                     accept=".jpeg, .png" />   

 getFileToPicture (event) {
      let file = event.target.files[0]
      console.log(file)
      // 判斷文件類型   如果是jpg、png 則支持上傳。否則 中斷並提示
      if (file.type !== 'image/png' && file.type !== 'image/jpg') {
        alert('上傳的圖片僅支持 png/jpg 格式')
        file.value = ''
        return
      }
      let freader = new FileReader()
      if (file.size > 1024 * 1024 * 20) {
        alert('上傳的圖片大小超過20M')
        file.value = ''
        return
      }
      this.imgName = file.name
      this.imgFile = event.target.files
      freader.readAsDataURL(file)// 讀取照片
      let _this = this
      freader.onload = (e) => { // 讀取成功
        event.srcElement.value = '' // 清除路徑
        _this.info.PHOTO = freader.result
      }
    }

因為  accept 屬性 各瀏覽器的支持情況不同，所以  前端需要對 file的類型再進行一次格式判斷