excel的上传组件

墨蓝 2023-09-27 12:56 13阅读 0赞

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};
        },