Vue 根据Upload组件的before-upload方法,限制用户上传文件的类型及大小

文章目录

  • 一、前端 Vue `Upload`组件的`before-upload`方法
  • 二,使用方法


Vue 根据Upload组件的before-upload方法,限制用户上传文件的类型及大小_第1张图片

一、前端 Vue Upload组件的before-upload方法

判断用户上传的文件是否符合要求,可以根据文件类型或者大小做出限制。

文件类型
doc application/msword
docx application/vnd.openxmlformats-officedocument.wordprocessingml.document
xls application/vnd.ms-excel
xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
txt text/plain
pdf application/pdf
zip application/x-zip-compressed
exe application/x-msdownload

二,使用方法

用file.type判断上面的文件类型就可以了,也可以根据文件的大小做限制。

    beforeFileUpload (file) {
      console.log(file.type, '文件上传之前钩子')
      const isJPG = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' || file.type === 'application/pdf' || file.type === 'application/msword'
      if (!isJPG) {
        this.$Message.error('只能上传 xls、xlsx、doc、docx、pdf 格式的文件')
        return false
      }
      const isLt30M = file.size / 1024 / 1024 < 30
      if (!isLt30M) {
        this.$Message.error('文件大小不能超过 30MB')
        return false
      }
      return true
    },

你可能感兴趣的:(vue.js,javascript)