📥 导入Excel文件

ThinkAdmin 提供完善的Excel文件导入功能,支持将Excel文件中的数据导入到数据库中。

🚀 主要功能

  • Excel 导入: 支持Excel文件的数据导入
  • 文件上传: 支持文件上传和存储
  • 数据解析: 自动解析Excel文件内容
  • 数据库写入: 将解析的数据写入数据库
  • 错误处理: 提供完善的错误处理机制
  • 进度显示: 支持导入进度显示

📋 支持格式

Excel 格式

  • XLSX: 支持新版Excel格式
  • XLS: 支持旧版Excel格式
  • 数据解析: 自动解析Excel数据
  • 格式验证: 支持数据格式验证

存储方式

  • 本地存储: 支持本地文件存储
  • 云存储: 支持云存储方式(需测试)
  • 临时存储: 支持临时文件存储
  • 安全处理: 提供安全的文件处理

⚙️ 实现方式

1. 前端HTML代码

  • 上传按钮: 使用 data-file 属性
  • 文件类型: 设置 data-type="xlsx,xls"
  • 存储方式: 设置 data-uptype='local'
  • 字段名称: 设置 data-field="topic_excel"

2. 前端JavaScript代码

  • 文件选择: 处理文件选择事件
  • 上传过程: 处理文件上传过程
  • 进度显示: 显示上传进度
  • 结果处理: 处理上传结果

3. 后端处理

  • 文件接收: 接收上传的Excel文件
  • 数据解析: 解析Excel文件内容
  • 数据验证: 验证数据格式和内容
  • 数据库写入: 将数据写入数据库

🔧 使用说明

文件上传配置

  • 存储类型: 设置 data-uptype 为存储方式
  • 文件类型: 设置 data-type 为支持的文件类型
  • 字段名称: 设置 data-field 为字段名称
  • 权限控制: 使用 auth() 函数控制权限

事件处理

  • 文件选择: 处理 upload.choose 事件
  • 上传开始: 处理 upload.start 事件
  • 上传进度: 处理 upload.progress 事件
  • 上传完成: 处理 upload.done 事件
  • 上传失败: 处理 upload.error 事件
1 前端 html 代码部分

<div class="layui-form-item layui-inline">
    <button class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe615;</i> 搜 索</button>

    <!-- 上传按钮放在搜索按钮后面,可根据自己的需求调整位置 -->
    <!--{if auth("import")}-->
    <button class='layui-btn layui-btn-sm layui-btn-active' data-file data-type="xlsx,xls" data-uptype='local' data-field="topic_excel">上传题库</button>
    <!--{/if}-->
</div>

data-uptype 设置上传文件存储方式,这里设置的是local,后端读取文件内容会用到 (未测试云存储方式)

2 前端 js 代码部分
{block name='script'}
<script>
    window.form.render();
    $(function () {
        /*!文件上传过程及事件处理 */
		$('[data-file]').on('upload.choose', function (files) {
			// 文件选择后的事件
		}).on('upload.hash', function (event, file) {
			// file 当前文件对象
		}).on('upload.progress', function (event, obj) {
			// obj.file 当前文件对象
			// obj.event 文件上传进度事件
			// obj.number 当前上传进度值
		}).on('upload.done', function (event, obj) {
			// obj.file 当前完成的文件对象,每个文件上传成功将会调用
			// obj.data 当前文件上传后服务端返回的内容,部分云上传不会返回数据
			
			// obj.file 当前完成的文件对象
			// obj.data 当前文件上传后服务端返回的内容
			console.log(obj.file);
			console.log(obj.data);
			/*! 提交数据并返回结果 */
			if(obj.file.xurl) $.form.load('{:url("import")}', {file: obj.file.xurl}, 'post');
		}).on('upload.complete', function (event) {
			// 全部文件上传成功
		});
    });
</script>
{/block}

文件上传js部分可参考:前端-文件上传

data-uptype 设置上传文件存储方式,这里设置的是local,后端读取文件内容会用到 (未测试云存储方式)

3 后端代码部分

composer require phpoffice/phpspreadsheet


	use \PhpOffice\PhpSpreadsheet\IOFactory;

	public function import()
    {
        $file = $this->app->request->post('file');
        if (!$file) $this->error('文件不能为空');
        $file = '.' . str_replace($this->app->request->domain(), '', $file);
        //表格字段对应
        $cellName = [
            'A' => 'no',//序号
            'B' => 'name',//题目
        ];
        //加载文件
        $spreadsheet = IOFactory::load($file);

        $sheet = $spreadsheet->getActiveSheet();               // 获取表格
        $highestRow = $sheet->getHighestRow();                 // 取得总行数
        $sheetData = [];
        for ($row = 2; $row <= $highestRow; $row++) {          // $row表示从第几行开始读取
            foreach ($cellName as $cell => $field) {
                $value = $sheet->getCell($cell . $row)->getValue();
                $value = trim($value);
                $sheetData[$row][$field] = $value;
            }
        }
        $sheetData = array_values($sheetData);
        $count = count($sheetData);
        //TO DO 入库自行处理
		halt($sheetData);
		/*
        $this->app->db->name($this->table)->data($sheetData)->strict(false)->insertAll();
        $this->success('导入成功');
		*/
    }

简单demo仅供参考,多sheet、表格格式等未做校验,可根据自己要求完善

如有更可行的方式,可随时微信群 @Mian L ,如有不严谨或者不规范的地方欢迎指正。

最近更新:
Contributors: 邹景立, liupengfeicode