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的类型再进行一次格式判断

转载于:https://www.cnblogs.com/theMilkyWay/p/11248796.html