element-ui ，el-upload 文件上传必选项校验-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui ，el-upload 文件上传必选项校验。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

虽然是一个比较小的问题，但是总结一下，当时用的时候网上查了很多，但是没什么卵用，实现不了，谨以此篇记录自己的

element-ui ，el-upload 文件上传必选项校验
代码文章来源地址https://www.toymoban.com/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>点击上传</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('请先上传文件'))
        } else {
          callback()
        }
      }
      return {
        form: {
          file: [],
        },
        rules: {
          file: [
            {
              message: '请先上传文件',
              trigger: 'change',
              required: true,
            },
          ],
        },
        title: '',
        dialogFormVisible: false,
        acceptList: '.xls,.xlsx',
        uploadUrl: '',
      }
    },
    created() {
     //手动上传文件
      this.uploadUrl = baseURL + '/url/上传接口地址'
    },
    methods: {
      showEdit(row) {
        
        this.title = '导入'
        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') //清除文字校验
        }
      },
      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>

到了这里，关于element-ui ，el-upload 文件上传必选项校验的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！