vue3 Element_UI 文件上传导入导出

导入

父组件

<el-button type="primary" @click="inportSetting">导入配置</el-button>
<ImportSetting
      :dialogVisible="importVisibel"
      @closeImportDialog="closeImportDialog"
      @closeImportDialogReflash="closeImportDialogReflash"
    />

    const importVisibel = ref(false);
        function inportSetting() {
    
    
      console.log('导入配置');
      importVisibel.value = true;
    }
 //导入刷新
    function closeImportDialogReflash() {
    
    
      importVisibel.value = false;
    }
    //关闭导入
    function closeImportDialog() {
    
    
      importVisibel.value = false;
    }

ImportSetting组件

<!--
 * @Author: qiangding2 qiangding2@iflytek.com
 * @Date: 2023-04-14 16:14:12
 * @LastEditors: qiangding2 qiangding2@iflytek.com
 * @LastEditTime: 2023-05-18 16:29:29
 * @FilePath: \bpmn_kit\src\views\dataMaintenance\componests\ImportDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog
    title="导入"
    :visible.sync="dialogVisible"
    width="35%"
    @open="open"
    :before-close="handleClose"
  >
    <div v-loading="uploadloading" class="upload-container">
      <el-upload
        ref="upload"
        class="upload_demo"
        drag
        name="fileame"
        action="https://jsonplaceholder.typicode.com/posts/"
        :http-request="uploadMehod"
        :file-list="fileList"
        :on-exceed="handleExceed"
        :limit="1"
        :on-change="fileChange"
        :before-remove="deleteFile"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
          <br />支持扩展名: .xlsx
        </div>
      </el-upload>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleDefine">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
    
     ref } from '@vue/composition-api';
import {
    
     useNotify } from '@hooks/index';
export default {
    
    
  props: {
    
    
    dialogVisible: {
    
    
      default: false,
      type: Boolean
    }
  },
  setup(props, {
     
      emit }) {
    
    
    const {
    
     notifyWarning } = useNotify();
    const uploadloading = ref(false);
    const upfile = ref(null);
    const fileList = ref([]);
    const isAddFileStatus = ref('');

    function uploadMehod(params) {
    
    
      upfile.value = params.file;
    }
    // 步骤1： 选择文件
    function fileChange(file) {
    
    
      fileList.value[0] = file;
      const isJsonTxt = checkFile(file);
      if (!isJsonTxt) {
    
    
        return (fileList.value = []);
      }
      if (file.size > 1048576) {
    
    
        notifyWarning('文件超过1M!');
        return (fileList.value = []);
      }
    }

    function checkFile(file) {
    
    
      const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1);
      console.log(fileSuffix);
      if (fileSuffix !== 'xlsx' && fileSuffix !== 'xls') {
    
    
        notifyWarning('文件类型选择错误!');
        uploadloading.value = false;
        return false;
      } else {
    
    
        return true;
      }
    }

    function deleteFile() {
    
    
      // console.log('delete')
      fileList.value = [];
    }
    // 文件超出限制
    function handleExceed(files, file) {
    
    
      console.log(files, file);
      // 选择两个文件
      if (files.length >= 2) {
    
    
        notifyWarning('当前限制选择 1 个文件,请重试！');
      } else {
    
    
        files[0].status = 'ready'; // 修改文件状态
        const isJsonTxt = checkFile(files[0]);
        if (!isJsonTxt) {
    
    
          return;
        }
        if (files[0].size > 1048576) {
    
    
          notifyWarning('文件超过1M!');
        } else {
    
    
          // 文件替换
          fileList.value = [];
          fileList.value[0] = files[0];
        }
      }
    }

    function open() {
    
    
      console.log('打开');
    }
    function handleClose() {
    
    
      emit('closeImportDialog');
      console.log('关闭');
    }
    function handleDefine() {
    
    
      console.log('确定');
      emit('closeImportDialogReflash');
    }
    return {
    
    
      open,
      handleClose,
      handleDefine,
      uploadloading,
      upfile,
      uploadMehod,
      checkFile,
      fileList,
      isAddFileStatus,
      deleteFile,
      handleExceed,
      fileChange
    };
  }
};
</script>

<style lang="scss" scoped>
.upload-container {
    
    
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
</style>

导出

   <el-button type="primary" @click="exportSetting">导出配置</el-button>

 function exportSetting() {
    
    
      // console.log('导出配置');
      // let blob = new Blob(['Hello world']);
      // // filename = decodeURIComponent(filename);
      // saveAs(blob, 'hello world.txt');

      var blob = new Blob(['Hello world'], {
    
    
        type: 'application/json'
      });
      let url = window.URL.createObjectURL(blob);
      let a = document.createElement('a');
      a.href = url;
      a.download =
        new Date().getFullYear() +
        '-' +
        Number(new Date().getMonth() + 1) +
        '-' +
        new Date().getDate();
      a.click();
      window.URL.revokeObjectURL(url);
    }