随笔 - 315  文章 - 1  评论 - 12  阅读 - 24万

el-upload上传必填验证

复制代码
 <el-form-item label="excel文件" prop="file">
          <el-upload style="display: inline-block;margin-left: 10px"
                    class="upload-demo"
                     ref="upload"
                     :file-list="addForm.file"
                     accept=".xls,.xlsx"
                     :data="addForm"
                     :auto-upload="false"
                     :action="uploadFileUrl"
                     :headers="headers"
                     :show-file-list="false"
                     :on-success="handleUploadSuccess"
                     :on-change="changeFile"
                     >
            <span v-if="curName">{{curName}}</span>
            <el-button type="primary" icon="" v-else>选文件</el-button>
          </el-upload>
        </el-form-item>
复制代码

data部分

复制代码
 addForm: {
        file:[],
        annexUrl:''
      },
      rules: {
        file: [
          {required: true, message: '导入文件不能为空'}
        ]
      },
复制代码

 

script部分

复制代码
changeFile(file,fileList){
      this.curName = file.name;
      if (fileList.length > 0) {
        this.addForm.file = fileList;
        this.$refs.addForm.clearValidate('file'); //清除文字校验
      }
    },
复制代码
 // 导入:提交表单
    submitComplete() {this.$refs.addForm.validate(async (valid) => {
        if (valid) {if(typeof this.addForm.file == 'object'){  // 验证加的file可以删除,也可留着。
            delete this.addForm.file;
          }
          this.$refs.upload.submit(); // upload提交
        }
      });
    },
复制代码

 

 
复制代码

 

posted on   小虾米吖~  阅读(1145)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」

点击右上角即可分享
微信分享提示