雖然是一個(gè)比較小的問題，但是總結(jié)一下，當(dāng)時(shí)用的時(shí)候網(wǎng)上查了很多，但是沒什么卵用，實(shí)現(xiàn)不了，謹(jǐn)以此篇記錄自己的

代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-510122.html

<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="520px"
    class="dialogClass"
    @close="close"
  >
    <el-form ref="form" :model="form" label-width="95px" :rules="rules">
      <el-form-item label="上傳文件:" prop="file">
        <el-upload
          ref="upload"
          drag
          multiple
          :file-list="form.file"
          :action="uploadUrl"
          :accept="acceptList"
          :on-change="handleChange"
          :show-file-list="true"
          :limit="1"
          :auto-upload="false"
          :on-success="handleFile"
          :on-remove="handleRemove"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            將文件拖到此處，或
            <em>點(diǎn)擊上傳</em>
          </div>
          <div slot="tip" class="el-upload__tip">只允許上傳Excel格式文件</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <div class="footStyle">
        <el-button @click="close">取 消</el-button>
        <el-button
          type="primary"
          style="margin-left: 60px"
          @click="submitButton"
        >
          確 定
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import { baseURL } from '@/config'
  export default {
    name: 'ImportTeacher',
    data() {
      const validateLogo = (rule, value, callback) => {
        if (this.form.file.length == 0) {
          callback(new Error('請(qǐng)先上傳文件'))
        } else {
          callback()
        }
      }
      return {
        form: {
          file: [],
        },
        rules: {
          file: [
            {
              message: '請(qǐng)先上傳文件',
              trigger: 'change',
              required: true,
            },
          ],
        },
        title: '',
        dialogFormVisible: false,
        acceptList: '.xls,.xlsx',
        uploadUrl: '',
      }
    },
    created() {
     //手動(dòng)上傳文件
      this.uploadUrl = baseURL + '/url/上傳接口地址'
    },
    methods: {
      showEdit(row) {
        
        this.title = '導(dǎo)入'
        this.dialogFormVisible = true
      },
      //限制文件大小
      handleChange(file, fileList) {
        console.log(123123, file, fileList[0])
        if (file.size / 1024 / 1024 > 500) {
          this.$baseMessage('文件大小不能大于500M', 'error')
        }
        if (fileList.length > 0) {
          this.form.file = fileList
          this.$refs.form.clearValidate('file') //清除文字校驗(yàn)
        }
      },
      handleRemove(file, fileList) {
        if (fileList.length == 0) {
          this.form.file = []
        }
        console.log('移除文件', file, fileList)
      },
      //文件上傳
      handleFile(res) {
        if (res.code == 200 || res.code == '200') {
          this.dialogFormVisible = false
          this.$baseMessage('上傳成功!', 'success')
        } else {
          this.form.file = []
          this.$baseMessage(res.error.message, 'error')
        }
        this.$refs.upload.clearFiles()
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      submitButton() {
        console.log('文件上傳', this.form.file)
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            this.$nextTick(() => {
              this.$refs.upload.submit()
            })
          } else {
            return false
          }
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .footStyle {
    width: 100%;
    text-align: center;
  }
  .dialogClass {
    ::v-deep {
      .el-form-item__label {
        font-size: 15px;
        font-weight: 600;
      }
      .el-upload-dragger .el-icon-upload {
        color: #1a8cfe;
      }
    }
  }
</style>

到了這里，關(guān)于element-ui ，el-upload 文件上傳必選項(xiàng)校驗(yàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！