layui上传并读取excel文件

这篇博客介绍了前端如何使用upload组件进行文件上传,指定上传字段,并限制文件类型和大小。后端通过request.files获取上传文件,利用BytesIO转换二进制数据,用pandas读取Excel。注意xlrd版本问题,需要降级到1.2.0以支持.xlsx文件。

前端代码

        upload.render({
                    elem:'#load',
                    url:'/data/uploadStuInfo',
                    accept:'file',         
                    field: "stuInfo",     //后端利用request.files['stuInfo']来获取上传的文件
                    exts:'xls|xlsx|csv', //允许上传的类型
                    size:'5*1024',

                    before: function (obj) { //obj参数包含的信息,跟 choose回调完全一致,可参见上文。
                            index = layer.load(1); //上传loading //上传logo
                    },
                    done:function (res) {
                        layer.close(index)
                        layer.msg('上传成功')
                    },
                    error:function () {
                        console.log('上传失败')
                    }
                })

后端代码

将前端传过来的二进制数据利用io.BytesIO处理,之后就可以直接使用pandas.read_excel读取前端上传的excel了。

#上传文件
def uploadStuInfo():
    print(request.files)
    #利用前端设置的field属性,来获取上传的文件
    file = request.files['stuInfo']
    #获取文件名
    print(file.filename)
    #获取文件二进制数据
    fileContent = file.read()
    #将bytes转化为流
    res = io.BytesIO(fileContent)
    #使用pandas.read_excel读取
    data =pd.read_excel(res)
    print(data)
    return jsonify({"code": 0})

print结果

xlrd更新到了2.0.1版本,只支持.xls文件。所以pandas.read_excel(‘xxx.xlsx’)会报错。
解决方法:

pip uninstall xlrd
pip install xlrd==1.2.0

### 实现MVC和Layui上传解析Excel文件 #### 前端部分:使用Layui实现文件上传功能 为了使用户能够选择要上传Excel文件,在前端页面中利用Layui框架中的`upload`模块来创建一个简单的文件上传组件。当用户选择了文件后,通过调用自定义函数`uploadExcel()`处理所选文件。 ```html <!-- 引入必要的Layui样式 --> <link rel="stylesheet" href="/layui/css/layui.css"> <script src="/layui/layui.js"></script> <button type="button" class="layui-btn">选择文件 <input type="file" name="file" id="test1" multiple> </button> <script> layui.use('upload', function(){ var upload = layui.upload; // 执行实例 var uploadInst = upload.render({ elem: '#test1' // 绑定元素 ,url: '/upload/excel' // 接口地址 ,done: function(res){ console.log(res); if (res.code === 0) { layer.msg('上传成功'); // 调用方法刷新表格或其他操作 } else { layer.msg(`上传失败${res.message}`); } } ,error: function(){ // 请求异常回调 layer.msg('请求异常'); } }); }); function uploadExcel(fileArr) { /* 处理逻辑 */ } </script> ``` 此段代码实现了基本的文件选择界面以及与服务器通信的功能[^1]。 #### 后端部分:接收文件在服务端解析Excel内容 在Spring MVC环境中设置控制器用于接受来自客户端提交过来的文件对象,将其传递给专门负责解析Excel文档的服务类进行进一步的操作。这里假设已经引入了Apache POI库以便于读取`.xls`或`.xlsx`格式的内容。 ```java import org.apache.poi.ss.usermodel.*; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.multipart.MultipartFile; import java.io.InputStream; import java.util.Iterator; import java.util.Map; @RestController @RequestMapping("/upload") public class ExcelUploadController { @PostMapping("/excel") public Map<String, Object> handleFileUpload(@RequestParam("file") MultipartFile file) throws Exception{ try(InputStream inputStream = file.getInputStream()){ Workbook workbook = WorkbookFactory.create(inputStream); Sheet sheet = workbook.getSheetAt(0); Iterator<Row> rowIterator = sheet.iterator(); while(rowIterator.hasNext()) { Row currentRow = rowIterator.next(); // 对每一行数据做相应处理... } return Collections.singletonMap("code", 0); // 成功响应码 } catch(Exception e){ logger.error(e.getMessage(),e); throw new RuntimeException("Failed to parse excel"); } } } ``` 上述Java代码片段展示了如何构建一个RESTful API接口以支持POST方式上传单个Excel文件至指定路径下,尝试打开第一个工作表遍历其中所有的记录项[^3]。 完成这些配置之后,一旦接收到有效的Excel文件输入,则会触发后台程序自动执行相应的业务流程;待整个过程结束以后再向浏览器反馈最终的结果状态信息[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值