excel的上传组件

linab112

已于 2022-11-27 14:51:44 修改

阅读量209

点赞数

分类专栏：前端文章标签：开发语言 vue.js excel

于 2022-11-27 14:50:10 首次发布

本文链接：https://blog.csdn.net/m0_72167535/article/details/128064341

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

这个博客展示了如何在Vue.js中创建一个自定义组件用于文件上传和下载。组件利用了Element UI库，支持拖放上传，限制了文件类型和大小，并提供了上传前的参数设置。上传功能通过一个axios封装的API实现，使用POST方法提交数据。使用该组件时，需要导入并设置相关信息，如URL、下载链接、文件名等。当上传完成后，可以通过监听组件的关闭事件来刷新数据。

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

1.上传组件

<template>
  <el-dialog v-dialog-drag ref="uploadDialog" :title="info.title" :visible.sync="info.open" width="500px"
             append-to-body>
    <div style="margin-bottom: 10px">点击下载
      <el-button type="text" @click="downloadTemplate">{{ info.buttonName }}</el-button>
    </div>
    <el-upload
      drag
      accept=".xls, .xlsx"
      action="#"
      :show-file-list="false"
      :http-request="requestUpload"
      :before-upload="beforeUpload">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件，且不超过500kb,红色表示必填项</div>
    </el-upload>
  </el-dialog>
</template>
<script>
import {upload} from "@/api/tool/upload";

export default {
  props: {
    info: {
      url: null,
      downUrl: null,
      fileName: null,
      title: null,
      open: Boolean,
      buttonName: null,
      params: null
    }
  },
  data() {
    return {
      // 上传参数
      upload: {
        file: null,
        updateSupport: true,
        params: null
      }
    };
  },
  methods: {
    //模板下载
    downloadTemplate() {
      this.$download.file(this.info.downUrl, this.info.fileName);
    },
    beforeUpload(file) {
      this.upload.file = file;
      if (this.info.params) {
        this.upload.params = JSON.stringify(this.info.params);
      }
    },
    requestUpload() {
      let formData = new FormData();
      formData.append("file", this.upload.file);
      formData.append("updateSupport", this.upload.updateSupport);
      formData.append("params", this.upload.params);
      upload(this.info.url, formData).then(response => {
        this.info.open = false;
        this.$modal.msgSuccess("导入成功");
      });
    },
  }
};
</script>

组件的api

import request from "@/utils/request";

/**
 * 上传文件
 * @param data
 * @returns {AxiosPromise}
 */
export function upload(url,data) {
  return request({
    url: url,
    method: 'post',
    data: data
  })
}

2.使用方式

导入组件，这里没有做成全局组件，一些常用的组件可以做成全局组件

import uploadDialog from "@/views/tool/upload/upload";

  components: {
    uploadDialog
  },

使用组件

    <!-- 上传文件对话框 -->
    <upload-dialog :info="info" ref="uploadDialog"/>

对组件的参数进行设置

      /**导入相关参数*/
      info: {
        url: "/settle/memo/import",
        downUrl: "/settle/memo/excelTemplate",
        fileName: "结算账单导入模板.xlsx",
        title: "结算账单导入",
        open: false,
        buttonName: "结算账单导入模板",
        params: null
      },

监听组件

导入结束后，及时刷新画面

  watch: {
    //监听上传组件弹框关闭
    'info.open': {
      immediate: true,
      handler: function (val) {
        if (!val) {
          //刷新列表
          this.handleQuery();
        }
      }
    },

点击导入按钮

给组件传值，打开组件

    handleImport() {
      this.info.open = true;
      // this.info.params = {returnOrderNo: this.detail.returnOrderNo, orderId: this.detail.id};
    },