干货！Flask如何优雅的获取Web上传的表格文件

vlambda
2022-03-20

干货！Flask如何优雅的获取Web上传的表格文件

前言

如何通过上传Excel表格的形式发送数据给后端，一直是我开发过程中较头疼的问题。

前期用最简单的方式上传表格数据，通过把文件规定名称、规定路径，再利用Pandas获取固定路径下的文件数据进行处理。这种方式的优点是代码简单、易操作，缺点是不够灵活、不够方便，必须要在运行程序的服务器上面操作才行。

那有没有比较好的方式呢？

当然有，这就是本文所要讲的重点，后端如何获取前端上传的文件，请往下看~~~

前端代码

<form name="qrcodeall" action="QRcodemakeallResult" method="POST" enctype="multipart/form-data" onsubmit="addclass()">          <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">选择Excel文件</span> </div> <input type="file" name="file" class="form-control" id="file" value="请上传Excel文件" required accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"> <div class="input-group-append" style="height: 38px;">
            <input type="submit" id="submit" name="confirmborrw" value="确认生成" class="btn btn-primary">          </div> </div></form>

解析：

创建一个form表单，我用的Bootstrap4前端框架，在form表单添加常规属性，如name、action、以及发起请求的方式method=POST/GET。上传文件，必须添加enctype="multipart/form-data"来限定数据的格式。
创建一个input元素，type选择file，表示上传文件，再添加常规属性。由于我们限定上传文件的格式，只允许上传Excel文件，故可以在此处添加属性accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"；
这样就可以限定只能上传Excel类型文件了。
再添加一个input元素，type选择submit，用来向后端提交表单数据。
其他的一些块和属性，均是Bootstarp4的CSS样式，用来装饰页面。

后端代码

# 点击批量二维码生成@app.route("/QRcodemakeallResult",methods=["GET","POST"])def QRcodemakeallResult(): try: gotoUI = "" # 获取时间  currenttime = time.strftime("%Y-%m-%d") # 生成随机数 rand = random.randint(1,1000)  if request.method == "GET": pass elif request.method == "POST": # 获取前端上传的excel文件 file = request.files['file'] # file = request.files.get('file') #等价同上 # 获取上传文件的名称 getpath = file.filename # 设定保存路径 mkpath = r"E:\02代码盘\Pythontext\售后仓库出入帐管理系统\数据库文件\物料二维码\上传文件" # 判断文件夹路径是否存在 if os.path.exists(mkpath+"\\"+currenttime) == False: # 创建新路径 createpath = os.mkdir(mkpath+"\\"+currenttime) # 赋值新路径 createpath = mkpath+"\\"+currenttime print("无路径，创建路径：",createpath) else: createpath = mkpath+"\\"+currenttime # 构造文件保存路径 savepath = createpath+"\\"+ currenttime +"(随机数："+ str(rand)+")" +getpath # 构造二维码保存路径 saveadd = createpath # 保存上传的文件至服务器指定位置 file.save(savepath) # 实例化二维码生成类 Codemanager= QRCodeManager() # 调用批量生成二维码的方法，并传入数据获取位置和二维码保存位置 backtrack,q = Codemanager.getitem(savepath,saveadd) if backtrack == 1: gotoUIstr = "生成{0}个二维码成功,批量生成只限服务器获取，保存路径如下：".format(q) gotoUI = (gotoUIstr,saveadd) else: gotoUI = ("生成二维码失败，请联系管理员处理！","...") return render_template("QRcodemakeall.html",path=gotoUI)

后端我们用的是Flask进行处理，创建路由app这些，此处暂时不细讲，我们来看代码。

解析：

首先创建一个路由@app.route("/QRcodemakeallResult",methods=["GET","POST"])，设置url为前端form表单action的属性"QRcodemakeallResult"，提交方式我们填写methods=["GET","POST"]，这样写的好处是，不管前端是发起POST请求，还是GET请求，我们只需要在内部判断，即可进行不同请求的处理。
定义一个路由函数，用来处理路由数据。
通过file = request.files['file']，我们可以获取前端传过来的文件数据；通过getpath = file.filename，我们可以获取文件的名称；
构造一个保存路径，这个可以根据个人需要进行构造，我使用的是os库获取服务器指定文件夹的路径，在文件夹再动态添加以日期为名称的文件夹，用来保存前端上传的文件。保存文件的路径我添加了随机数，避免相同名称导致保存失败。
再利用file.save(savepath)，传入构造好的路径，即可保存前端上传的文件。
此时，根据实际功能的需要，你可以保存文件路径到数据库，也可以直接拿路径去读取数据。

*划重点：

通过上传文件获取数据的核心其实是保存文件，再利用路径去服务器读取数据，而不是上传直接解析数据，因为上传的数据类型是multipart/form-data，无法直接解析。
前端代码一定要添加enctype="multipart/form-data"，设置数据类型。
构造路径时添加随机数或用uuid库生成全球唯一识别码添加至名称中，这样可以避免文件保存失败。

干货！Flask如何优雅的获取Web上传的表格文件