el-upload实现导入功能

神探小白牙

已于 2023-05-25 16:45:12 修改

阅读量332

点赞数

分类专栏： element 文章标签： javascript vue.js 开发语言

于 2023-05-25 15:47:10 首次发布

本文链接：https://blog.csdn.net/anny_mei/article/details/130868796

版权

element 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

这段代码展示了在Vue应用中如何实现Excel文件的上传和导入功能。用户可以选择下载导入模板，或者直接上传已有的Excel文件。上传的文件通过el-upload组件处理，限制为.xls或.xlsx格式，并通过http-request自定义上传逻辑。导入文件后，调用importExcel方法处理数据，成功后会显示成功消息并获取导入的数据渲染到页面。

摘要由CSDN通过智能技术生成

其实上传和下载功能是差不多的,只是传参些微有些不同,效果如图
在这里插入图片描述
上代码

    <!-- 导入数据 -->
    <el-dialog
      title="进销数据导入"
      :visible.sync="ifShowImport"
      width="35%"
      z-index="999"
      :before-close="handleClose"
    >
      <div class="upload_box">
        <el-button
          size="medium"
          icon="el-icon-download"
          @click="handelDownTemplate"
          >下载导入模板</el-button
        >
        <el-button
          size="medium"
          icon="el-icon-download"
          @click="showUpload = true"
          >已有模板,直接导入</el-button
        >
      </div>
      <el-upload
        v-if="showUpload"
        class="upload-demo"
        drag
        action="*"
        :limit="1"
        accept=".xlsx, .xls"
        :http-request="handleExcel"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传 xls、xlsx 文件</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ifShowImport = false">取 消</el-button>
        <el-button type="primary" @click="handleClose">确 定</el-button>
      </span>
    </el-dialog>

方法部分


    //导入表格
    handleExcel(e) {
      let fd = new FormData();
      fd.append("file", e.file);
       // importExcel这个方法普通封装就行,不用定义 responseType: "blob",
      importExcel(fd)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success(res.msg);
            this.getTableData(); // 导入表格之后可以获取导入的数据渲染到页面，此处的方法是获取导入的数据
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },