<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，僅導(dǎo)入第1個sheet頁內(nèi)容
         </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