[JavaScript知识库]vue实现导入Excel数据

导入

1、api链接

 introductionCarModelInfoApi='/carModel/info/introductionCarModelInfo',

2、接口操作

export function importExcel(data: any) {
  return new Promise(async () => {
    const { createMessage ,createConfirm} = useMessage();
    const formData = new FormData();//转换fromData格式
    formData.append('file', data);//传给后端的参数，
    defHttp
      .request(
        {
          url: `/af-zk-carmodel${Api.introductionCarModelInfoApi}`,
          method: 'post',
          params: formData,
        },
        {
          isTransformRequestResult: false,//框架配置 用于页面代码可能需要直接获取code，data，message这些信息时开启
          apiUrl: import.meta.env.DEV ? '/basic-api/af' : '',
        }
      )
      .then((res) => {
        if (res.data.code=== '000000') {
          // createMessage.success('数据传输完成,请稍后重新查询列表数据');
          createConfirm({
            iconType: 'success',
            content: `成功${res.data.data.successNum}条,失败${res.data.data.defaltNum}条`,
          });
        } else {
          createMessage.error('导入失败,请稍后再试');
        }
      });
  });
}

3、自己封装的上传方法，引入到使用的页面直接调用标签

<template>
  <div style="display: inline">
    <input
      ref="inputRef"
      type="file"
      v-show="false"
      accept=".xlsx, .xls"
      @change="handleInputClick"
    />
    <div @click="handleUpload" style="display: inline">
      <slot></slot>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, unref } from 'vue';

  export default defineComponent({
    name: 'ImportExcel',
    emits: ['success', 'error'],
    setup(_, { emit }) {
      const inputRef = ref<HTMLInputElement | null>(null);
      const loadingRef = ref<Boolean>(false);

      /**
       * @description:  把excel数据转换成formData
       */
      function readerData(rawFile: File) {
        loadingRef.value = true;
        return new Promise((resolve, reject) => {
          let formData = new FormData();
          formData.append('file', rawFile);
          try {
            emit('success', formData);
            resolve('');
          } catch (error) {
            reject(error);
            emit('error');
          } finally {
            loadingRef.value = false;
          }
        });
      }

      async function upload(rawFile: File) {
        const inputRefDom = unref(inputRef);
        if (inputRefDom) {
          // fix can't select the same excel
          inputRefDom.value = '';
        }
        await readerData(rawFile);
      }

      /**
       * @description: 触发选择文件管理器
       */
      function handleInputClick(e: Event) {
        const files = e && (e.target as HTMLInputElement).files;
        const rawFile = files && files[0]; // only setting files[0]
        if (!rawFile) return;
        upload(rawFile);
      }

      /**
       * @description: 点击上传按钮
       */
      function handleUpload() {
        const inputRefDom = unref(inputRef);
        inputRefDom && inputRefDom.click();
      }

      return { handleUpload, handleInputClick, inputRef };
    },
  });
</script>

4、在当前文件的ts中重命名

import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';

export const ZkImpExcel = createAsyncComponent(() => import('./src/ZkImportExcel.vue'));
export * from './src/types';

export { jsonToSheetXlsx, aoaToSheetXlsx } from './src/Export2Excel';

6、在vue页面调用ZkImpExcel：为ts中const的名称

 <ZkImpExcel @success="loadDataSuccess">
          <a-button type="primary">导入</a-button>
        </ZkImpExcel>
        
 //  js导入
    function loadDataSuccess(excelData) {
      if (excelData.get('file')) {
        importExcel(excelData.get('file'));
      }
    }