实现web前端上传excel文件到flask服务器

@WUW@

已于 2022-01-21 22:38:28 修改

阅读量2.6k

点赞数

文章标签： flask 前端服务器 excel web

于 2022-01-21 19:04:41 首次发布

本文链接：https://blog.csdn.net/weixin_44221991/article/details/122627065

版权

这里有两种方法：1. html方式；2. javascript方式（jQuery+ajax）

第1种方法：html方式

这种方法直接通过设计form表单相关属性实现将excel表格上传到服务器，并在服务器端通过xlrd等excel文件处理模块读取数据。

前端页面示例代码（注意：form元素中的enctype="multipart/form-data"不可或缺）

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<form action="/toexcel" method="post" enctype="multipart/form-data">

      <li><input type="file" name="file" accept=".xls" value="请上传Excel文件"/></li>
      <li><input type="submit" value="导入" class="btn_search"></li>

</form>
</body>
</html>

后台示例代码展示

@app.route('/toexcel',methods = ['GET','POST'])
def toExcel():
    if request.method == 'POST':
        file = request.files.get('file')
        f = file.read()
        data_file = xlrd.open_workbook(file_contents=f)
        # sheet1
        table = data_file.sheet_by_index(0)
        # print(table)
        # print(table.nrows) # 获取该sheet中的有效行数
        for row_num in range(0, table.nrows):
            print(table.row_values(row_num))
        return redirect('/index') # 根据具体问题返回不同内容
    return redirect('/index') # 根据具体问题返回不同内容

第2中方法： javascript方式（jQuery+ajax）

这种方法利用FormData获得数据，通过ajax将数据上传到flask服务器端，再通过xlrd等excel文件处理模块读取数据。

前端页面关键代码（注意：form元素中的enctype="multipart/form-data"不可或缺）

<form enctype="multipart/form-data">
     <input type="file" name="file" id="file_name" accept=".xls"/>
</form>

<script>
    function upload_file(fileObj) {
        let form = new FormData(); // FormData 对象
        form.append("file", fileObj); // 文件对象
        console.log(form.get('file'));
        $.ajax({
            url: '/toexcel', //url地址
            type: 'POST',   //上传方式
            data: form,     // 上传formdata封装的数据
            dataType: 'JSON',
            cache: false,   // 不缓存
            processData: false, // jQuery不要去处理发送的数据
            contentType: false,  // jQuery不要去设置Content-Type请求头
            success:function (data) {   //成功回调
                console.log(data);  // 根据具体问题替换代码
            },
            error:function (data) {   //失败回调
                console.log(data);  // 根据具体问题替换代码
            }
        });
    }

    $('#file_name').change(function (e) {
        let fileName = e.target.files[0];//js 获取文件对象
        // console.log(fileName);
        if(fileName !== undefined){
            let file_typename = fileName.name.substring(fileName.name.lastIndexOf('.'));
            if (file_typename === '.xls') {
                upload_file(fileName);
            }else{
                console.log("请选择正确的文件类型！")
            }
            }else{
                console.log("请选择正确的文件！")
            }
     });

</script>

后台示例代码展示

@app.route('/toexcel', methods=['GET', 'POST'])
def toExcel():
   if request.method == 'POST':
       data = request.files.get('file')
       f = data.read()
       data_file = xlrd.open_workbook(file_contents=f)
       # sheet1
       table = data_file.sheet_by_index(0)
       # 输出每一行的内容
       # table.nrows获取该sheet中的有效行数
       for row_num in range(0, table.nrows):
           print(table.row_values(row_num))
       return ... # 根据具体问题返回数据
   return ... # 根据具体问题返回数据

@WUW@

关注

0
点赞
踩
20

收藏

觉得还不错? 一键收藏
1
评论
实现web前端上传excel文件到flask服务器

第1种方法：html方式这种方法直接通过设计form表单相关属性实现将excel表格上传到服务器，并在服务器端通过xlrd等excel文件处理模块读取数据。前端页面示例代码（注意：form元素中的enctype="multipart/form-data"不可或缺）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</tit
复制链接

扫一扫