vue element ui upload组件 上传 excel文件 总结 亲测有效哦亲

<<< 着急就直接拉到底拿走运行 想评论就评论一个 我还是那个么得理想的宝贝儿 >>>

• 开始正文 由于公司的需求 需要上传一个文件 格式的话就是 xls xlsx，毫无疑问 upload 看文档 有思路 开始动手
  • http-request ===> 文档解释 覆盖默认的上传行为，可以自定义上传的实现 字面意思就是 http-request是爸爸 其他的都是弟弟 有一票否决权
  • action 必传？ 貌似可以实现 。。。
  • before-upload ===> 文档解释 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。那我肯定可以在这个钩子函数里确定文件类型
  • accept ===> 可以限制文件类型 可以哦
  • limit ===> 文档解释 最大允许上传个数 字面意思？ 只能一次上传一个文件？？？ 那好吧 还需要你 (别信我这句 脸打肿了都)
• 样式
  • upload和 button不在同一行 ??? 给一个inline-block
• 文件格式判断
  • 钩子函数 before-upload
  • accept=".xls, .xlsx" ? 貌似也可以实现
• 上传
  • 钩子函数
  • 自定义上传 http-request
• 接口
  • headers: { ‘Content-Type’: ‘multipart/form-data’ }
• 问题
  • 上传一个文件的时候 如果文件错误或者其他原因都会导致一个问题 那就是上传不了第二个文件 也没有请求调用 为什么 http-request不是覆盖吗 默认只能走一次？好吧 东改西改 woc limit是什么？作用呢？好吧 删了他 成功 尼玛你在逗我哦 憨批
• 最后代码双手奉上

<template>
  <el-row justify="space-between" type="flex">
    <el-col :span="12" class="filter-button">
      <!-- 导入 -->
      <el-upload
        class="upload-demo inline-block"
        action="string"
        :http-request="httpRequest"
        :show-file-list="false"
        :before-upload="beforeAvatarUpload"
      >
        <el-button>导入</el-button>
      </el-upload>
      <el-button @click="exportExcel">导出</el-button>
      <el-button @click="download">下载</el-button>
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: "importFile",
  methods: {
    httpRequest(params) {
      // 上传我们需要传给后台两个必传参    file 和 filename  至于文件里面的内容后台处理就好
      let formdata = new FormData();
      formdata.append("File", params.file);
      formdata.append("FileName", params.file.name);
      // 这时候是打印不出来formdata的 只能通过 .get('File') 看是否append到formdata里
      this.$api.machine
        // 调用接口的话 都是封装后的 下面会贴一下我们的接口
        .importfacestatistics(formdata)
        .then(res => {
          if (res.data.Code == 0) {
            this.$message.success(`成功导入${res.data.Data}条数据！`);
            this.getData();
            this.getData1();
          } else {
            this.$message.error(res.data.Msg);
          }
        })
        .catch(e => {
          this.$message.error(e)
        });
    },
    beforeAvatarUpload(file) {
      console.log(file);
      const isXls =
        file.type === "application/vnd.ms-excel"? true:file.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"? true: false;
      if (!isXls) {
        this.$message.error("上传的文件只能是xls以及xlsx格式!");
      }
      return isXls;
    }
  }
  /*
     // 导入 
     // 接口这部分大概也没什么要说的 无非就是 请求的方式 传的参数  以及 请求头
    importfacestatistics(formdata){
        const baseUrl = window.config.API_HOST
        return axios.request({
            url: `${baseUrl}/api/machines/importfacestatistics`,
            method: 'post',
            data: formdata,
            headers: { 'Content-Type': 'multipart/form-data' }
        })
    }
  */
};