el-upload上传限制

对elment-UI的上传组件进行一次简易封装，对上传的文件进行限制。

限制：

1. 限制上传文件的后缀

2. 限制上传文件名长度

3. 限制上传文件大小

子组件

使用父组件传递进来的条件，对上传文件进行限制

export default {
  props: {
    buttonName: {
      type: String,
      default: '选取文件'
    },
    message: {
      type: String,
      default: ''
    },
    accept: {
      type: String,
      default: ".jpg, .png"
    },
    limit: {
      type: Number,
      default: 1
    },
    fileSize: {
      type: String,
      default: '1M'
    },
    fileNameRule: {
      type: Object,
      default: () => {
        return {
          rule: /\w{1, 50}/g,
          error: '文件名长度不饿能超过50个字符'
        }
      }
    }
  },
  data(){
      return {
          fileList: []
      }
  },
  methods: {
    uploadFile(info){
      console.log(info)
      this.$emit('store-local', info.file)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning('超过可上传的最大文件数量');
    },
    beforeRemove(file, fileList) {
      
    },
    handelCheckFile(file){
      const FileExt = file.name.replace(/.+\./, '')
      if(this.accept.toLowerCase().indexOf(FileExt.toLowerCase()) === -1){
        this.$message.error('请上传后缀名为' + this.accept + '的文件！')
        return false
      }
      // 文件名校验
      const reg = this.fileNameRule.rule
      const name = file.name.split('.')
      if(reg.test(name)){
        this.$message.warning(this.fileNameRule.error)
        return false
      }
      // 文件大小
      let numberStr = ''
      let unitStr = ''
      this.fileSize.split('').forEach(item => {
        if(!isNaN(Number(item))){
          numberStr = numberStr + item + ''
        }else{
          unitStr = unitStr + item
          unitStr = unitStr.toLowerCase()
        }
      })
      let totalSize = file.size
      let errMessage = ''
      switch(unitStr){
        case 'm': case 'mb':
          totalSize = file.size / 1024 / 1024
          break
        case 'k': case 'kb':
          totalSize = file.size / 1024
          break
        case 'g': case 'bg':
          errMessage = '暂不接受gb级别的文件上传！'
          break
      }
      const isOverSize = totalSize > Number(numberStr)
      const sizeZero = totalSize === 0
      if(errMessage){
        this.$message.warning(errMessage)
        return false
      }else if(isOverSize){
        this.$message.warning('文件大小超过' + this.fileSize + '！')
        return false
      }else if(sizeZero){
        this.$message.warning('文件无内容！')
        return false
      }
      // 添加文件
      this.fileList.push(file)
    }
  }
}

父组件

在模板块中将参数传递给子组件

将上传文件条件传递给子组件，上传到本地后将文件进行回传给父组件，等待上传给服务器

import upload from "@/views/tools/components/upload.vue"
export default {
	name: 'UploadTest',
	components: { upload },
	data(){
		return {
			files: [],
			accept: '.jpg',
			message: '只能上传.jpg格式的文件',
			buttonName: '文件上传',
			limit: 5,
			fileSize: '20M',
		}
	},
	methods: {
		storeLocal(file){
			this.files.push(file)
		},
		showData(){
			console.log(this.files)
		}
	}
}