el-upload アップロード制限

要素 UI のアップロード コンポーネントの単純なカプセル化を実行して、アップロードされるファイルを制限します。

制限:

1. アップロードされるファイルのサフィックスを制限する

2. アップロードされるファイル名の長さを制限する

3.アップロードファイルサイズを制限する

サブアセンブリ

<template>
  <el-upload
    ref="upload"
    :limit="limit"
    :accept="accept"
    action=""
    :before-upload="handelCheckFile"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    multiple
    :on-exceed="handleExceed"
    :file-list="fileList"
    :http-request="uploadFile">
    <el-button size="small" type="primary">{
   
   {buttonName}}</el-button>
    <div slot="tip" class="el-upload__tip">{
   
   {message}}</div>
  </el-upload>
</template>

親コンポーネントによって渡された条件を使用して、アップロードされるファイルを制限します

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(file){
      console.log(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)
      this.$emit('store-local', file)
    }
  }
}

親コンポーネント

テンプレート ブロック内の子コンポーネントにパラメータを渡す

<template>
	<div>
		<upload :buttonName="buttonName" :limit="limit" :message="message"
		:file-size="fileSize" @store-local="storeLocal"></upload>
		<el-button @click="showData">show data</el-button>
	</div>
</template>

アップロード ファイルの条件をサブコンポーネントに渡し、ファイルをローカルにアップロードして親コンポーネントに返し、サーバーへのアップロードを待ちます。

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)
		}
	}
}