vue + element + 导入excel表格

直接上代码复制粘贴即可！！！

<el-button type="primary" @click="dialogVisible=true,$refs.upload.clearFiles()">导入</el-button>
 <el-upload
        class="upload-demo"
        ref="upload"
        name="srcFile"
        :show-file-list="true"
        :action="filePath"
        :multiple="false"
        :auto-upload="false"
        :before-upload="beforeAvatarUpload"
        :on-success="handleAvatarSuccess"
        :limit="1">
        <el-button slot="trigger" size="mini" type="primary" @click="checkFile">选取文件	   </el-button>
        <el-button style="margin-left: 10px;" size="mini" type="success" @click="submitUpload">上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
</el-upload>

filePath是在data里定义导入文件得路径

然后在methods里加上方法:

beforeAvatarUpload(file) {
        console.log(file, 'file')
        const isJPG = file.type === 'application/vnd.ms-excel' || file.type == "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
        if (!isJPG) {
          this.$message.error('上传文件只能是 xls/xlsx 格式!');
        }
        return isJPG
      },
handleAvatarSuccess(res, file) {
        console.log(res, file)
        let returnCode = res.returnCode;
        if (returnCode == 1000) {
          this.$message({
            type: "success",
            message: res.returnMsg
          });

          this.dialogVisible = false
          this.queryList()
        } else {
          this.$message({
            type: 'warning',
            message: res.returnMsg
          })
        }
      },
checkFile() {
        this.$refs.upload.clearFiles();
      },
submitUpload() {
        this.$refs.upload.submit();
      },

										大功告成