vue2+element-ui+el-upload 判断规则

<template>
<el-form
     label-width="120px"
     :model="item"
     :rules="rules"
     ref="checkForm"
     @submit.native.prevent="save"
   >
      <el-form-item label="上传文件:" prop="fileList">
       <el-upload
         class="upload-demo"
         ref="upload"
         :action="uploadUrl"
         :limit="1"
         :file-list="item.fileList"
         accept=".xlsx"
         :on-success="fileUploadSuccess"
         :before-upload="beforeAvatarUpload"
         :headers="headers"
       >
         <el-button slot="trigger" type="primary">点击上传</el-button>
         <div slot="tip" class="el-upload__tip">
           注意:支持excel文件格式,大小不超过50M,仅导入第1个sheet页内容
         </div>
       </el-upload>
     </el-form-item>

     <el-form-item class="btn-form">
       <el-button plain @click="drawer = false">取消</el-button>
       <el-button type="primary" native-type="submit">保存</el-button>
     </el-form-item>
   </el-form>
</template>
<script>
const moment = require("moment");
import { commonMixin } from "../../mixins/commonMixin";
import maskPage from "@/views/Mask";
import { createWsSheet } from "../../plugins/creatWsSheet";

export default {

data() {
 return {
   uploadUrl: `http://${window.location.hostname}:${window.app.port}/admin/api/dcs-api/upload`,
   item:{
       fileList:[]
   },
rules: {
     fileList: [
       {
         required: true,
         validator: (rule, value, callback) => {
           console.log(value);
           if (value.length === 0) {
             callback(new Error("请上传文件"));
           } else {
             callback();
           }
         },
         trigger: "change",
       },
     ],
   },
 }
},
methods: {
  fileUploadSuccess(response, file, fileList) {
       const { code, message, data } = response;
       this.item.fileList = fileList;
 },
 beforeAvatarUpload(file) {
   const isLt2M = file.size / 1024 / 1024 < 50;
   const isExcel = /\.(xlsx|xls)$/.test(file.name);
   if (!isExcel) {
     this.$message.error("只能上传.xlsx、.xls文件!");
     return false;
   } else if (!isLt2M) {
     this.$message.error("上传的文件大小不能超过 50MB!");
     return false;
   }

   return true;
 },
 }
}
</script>

示例图


image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容