开发环境:

   
   jdk1.8
   SpringBoot 2.0
   Hutool
   Vue+Element UI

(一)文件上传导入

1.文件上传:(element-upload)
1.1 界面展示
excel导入.png

1.2 前端代码【完整代码

<el-dialog :title="upload.title" :visible.sync="upload.open" :close-on-click-modal="false" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处,或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的代表品数据
          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
        </div>
        <div class="el-upload__tip" style="color:#ff0000" slot="tip">提示:仅允许导入“xls”或“xlsx”格式文件!</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

1.2


2.Excel文件解析(Hutool中的poi封装类ExcelReader)

       2.1 单Sheet表解析。
       
       2.2 循环插入数据库。         

3.数据入库
       

相关文档:

   1.文件是如何上传的。
   2.文件上传原理。

标签: none

添加新评论