[BD+ElementPlsu] 完整的弹窗导入

• 父组件: web\src\views\backend\article\importTest.vue
• 子组件: web\src\views\backend\article\importTestSub.vue
• 后端: app\admin\controller\Api.php

1.父组件代码

<template>
    <div>
        <el-button @click="showDia">手写弹窗导入</el-button>
        <importTestSub :isShowDia="isShowDia" @updateShow="updateShow" />
    </div>
</template>

<script setup>
import { ref } from 'vue'
import importTestSub from './importTestSub.vue'

const isShowDia = ref(false)
const showDia = () => {
    isShowDia.value = true
}
const updateShow = (value) => {
    isShowDia.value = value
}
</script>

2.子组件上传代码

<template>
    <div>
        <el-dialog v-model="subShow" title="Shipping address">
            <el-form :model="form">
                <el-form-item label="备注">
                    <el-input v-model="form.remark" autocomplete="off" />
                </el-form-item>
                <el-form-item label="文件">
                    <el-upload ref="upload" class="upload-demo"
                        action="http://localhost:8000/index.php/admin/api/upload" :auto-upload="false"
                        :headers="headerObj" :data="form" :on-success="onSuccess">
                        <template #trigger>
                            <el-button type="primary">选择文件</el-button>
                        </template>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="updateShow(false)">取消</el-button>
                    <el-button type="primary" @click="submitUpload"> 上传文件</el-button>
                </span>
            </template>


        </el-dialog>

    </div>
</template>

<script setup lang='ts'>
    import { useAdminInfo } from '/@/stores/adminInfo'
    import { reactive, ref, watchEffect } from 'vue'

    import type { UploadInstance} from 'element-plus'
    import { ElNotification} from 'element-plus'
    const upload = ref < UploadInstance > ()

    const submitUpload = () => {
        upload.value!.submit()
    }

    const dialogTableVisible = ref(false)

    // el-upload中的属性data, 用来传值, 这里名称要对应
    const form = reactive({
        remark: ''
    })

    const props = defineProps({
        isShowDia: Boolean
    })

    let subShow = ref(props.isShowDia) // 本地变量

    // 使用watchEffect监听父组件值的变化
    watchEffect(() => {
        subShow.value = props.isShowDia
    })

    // emit
    const emit = defineEmits(['updateShow'])

    // 当子组件的值更改时, 传递给父组件
    const updateShow = (value) => {
        subShow.value = value
        emit('updateShow', value)
    }

    const adminInfo = useAdminInfo()
    const headerObj = {
        batoken: adminInfo.getToken() // 获取状态商店的batoken  
    }

    // 上传成功的回调
    const onSuccess = (res) => {
        console.log(res)
        if (res.code === 1) {
            ElNotification({
                message: "导入成功"
            })
            updateShow(false) // 关闭弹窗
        } else {
            ElNotification({
                message: res.msg
            })
        }
    }

</script>

3.后端代码

 public function upload()
 {
       
        // 获取表单上传文件
        $file = request()->file('file');
        if(empty($file)){
            return json(['info'=>'请选择上传文件！','status'=>0]);
        }
        // 移动到框架应用根目录/storage/public 目录下，并修改文件名为时间戳
        $savename = \think\facade\Filesystem::disk('public')->putFile('files', $file, 'time');
        $res = \think\facade\Filesystem::disk('public');
        $info = explode('/', $savename);
        $file_extension = strtolower(pathinfo($savename, PATHINFO_EXTENSION));//获取文件扩展名
        //实例化PHPExcel类
        if ($file_extension == 'xlsx'){
            $objReader =\PHPExcel_IOFactory::createReader('Excel2007');
        } else if ($file_extension == 'xls') {
            $objReader =\PHPExcel_IOFactory::createReader('Excel5');
        }
        // $objReader =\PHPExcel_IOFactory::createReader('Excel2007');
        $obj_PHPExcel =$objReader->load($file, $encode = 'utf-8');  // 加载文件内容,编码utf-8
        $list = $obj_PHPExcel->getsheet(0)->toArray();  // 转换为数组格式
        $highestRow = $obj_PHPExcel->getSheet(0)->getHighestRow() - 1; //取得总行数
        array_shift($list);  // 删除第一个数组(标题);

        // 继续完善导入的业务逻辑
        $remark  = request()->post('remark');
        
        // $this->error("导入失败了, 文件有问题");
        $this->success('上传成功');
    }