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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM