elementUI中el-table中使用el-upload

最新推荐文章于 2024-03-18 16:39:24 发布

weixin_46156770

最新推荐文章于 2024-03-18 16:39:24 发布

阅读量2.9k

点赞数 2

分类专栏： JavaScript vue 文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/weixin_46156770/article/details/126937602

版权

vue 同时被 2 个专栏收录

41 篇文章 2 订阅

订阅专栏

JavaScript

18 篇文章 0 订阅

订阅专栏

项目中需要在行里加入上传文件，又不好获取scope.row的中参数，差了老多资料解决了
在这里插入图片描述

<template>
   <el-table-column label="操作" width="270" fixed="right">
            <template slot-scope="scope">
              <el-upload
                class="upload-demo"
                ref="upload"
                action="#"
                :data="paramsObj"
                :http-request="
                  (file) => {
                    return uploadFile(file, scope.row);
                  }
                "
                :show-file-list="false"
                :before-upload="beforeUpload"
              >
                <el-button type="text" size="small">上传文件模板</el-button>
              </el-upload>
              <el-button
                type="text"
                size="small"
                @click="changeStatus(scope.row)"
                >{{ scope.row.enabledFlag ? "停用" : "启用" }}</el-button
              >
              <el-button
                @click="updateTemplate(scope.row)"
                type="text"
                size="small"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="delTemplate(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
</template>

<script>
   //  文件上传
    uploadFile(file, row) {
      this.fileName = file.file.name;
      const formData = new FormData();
      formData.append("file", file.file);
      formData.append("templateId", row.id);
      api.upload(formData).then((res) => {
        if (res.status == 200) {
          this.reaultData = res.data.data;
          this.$message({
            type: "success",
            message: "上传成功",
          });
          this.getTemplateList();
        } else {
          this.$message({
            type: "error",
            message: "上传失败",
          });
        }
      });
    },
    //  文件上传之前的校验
    beforeUpload(file) {
      let fileSize = file.size / 1024 / 1024;
      let isXls =
        file.name.split(".")[file.name.split(".").length - 1] === "xls";
      let isXlsx =
        file.name.split(".")[file.name.split(".").length - 1] === "xlsx";
      if (!isXls && !isXlsx) {
        this.$message.warning("上传文件只能是xls、xlsx格式！");
        return;
      }
      if (fileSize > 10) {
        this.$message.warning("文件超过10MB,请重新上传！");
        return;
      }
    }
</script>