前后端数据（图片）交互（jquery ajax + python flask + mongodb）

mac2025-07-23 3

前言：博主最近开始学习使用flask框架进行开发，遇到的第一个小问题是：从前端将照片发送到后端，并从后端处理后将数据根据一定的格式展现出来。尝试了很多种解决方案之后，记录下我的最终解决方法~

文章目录

（一）前端传数据到后端1. file.html（1）代码（2）表单界面展示（3）结果展示（二）接下来数据传到后端处理：1. config.py2. connect.py3. runserver.py （三）前端展示结果1. data.html（1）代码（2）页面结果展示我的文件结构是：

（一）前端传数据到后端

1. file.html

file.html主要是完成html页面的表单，并将数据传到后端。

第1部分是用于传输数据的表单，这里的表单元素主要有: id name(姓名) balance(余额) 和 photo(照片)。其中，由于mongdb是以 base64 的格式存储照片，我在表单中将上传的照片的 base64 格式放到 id 为 show 的 textarea 中。

第2部分是使用FormData()将表单的所有信息传到后端。

⭐具体实现是：

当上传photo时，会触发该控件的onchange 对应的load()函数，我们在下面的load() 函数中使用FileReader()读取图片并将图片转化为base64的格式将转化后的 base64 格式的值放到id 为 show 的 textarea 中使用FormData()将表单的所有信息传到后端，其中 jquery ajax不了解的话可以参考我的⭐另一篇博客⭐：jquery ajax 请求参数及使用示例

（1）代码

<!DOCTYPE html> <title>传输文件</title> <form id="form1" enctype="multipart/form-data"> <p> 填写id：<input type="text" name="id" id="id"> </p> <p> 填写name：<input type="text" name="name" id="name"> </p> <p> 填写balance：<input type="text" name="balance" id="balance"> </p> <p> 上传photo：<input type="file" name="file" id="file" onchange="load()"> </p> <p style="display: none;"> photo64编码：<textarea cols="60" rows="15" id="show" name="show"></textarea> </p> <button onclick="upload()">提交</button> </form> <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>  <script type="text/javascript"> function load() { var file = document.getElementById('file').files[0] console.log("读取源文件") console.log(file) var reader = new FileReader() //将文件以Data URL形式读入页面 reader.readAsDataURL(file); reader.onload = function() { var imgUrlBase64 = this.result console.log("转化为img64：") console.log(imgUrlBase64) document.getElementById('show').value = imgUrlBase64 } } function upload() { let formData = new FormData($("#form1")[0]) console.log('点击提交之后，打印FormData中的数据') console.log(formData.get('file')) $.ajax({ url: 'http://127.0.0.1:5000/upload', type: 'POST', data: formData, async: false, cache: false, contentType: false, processData: false, success: function(returndata) { alert(returndata); }, error: function(error) { alert(error); } }) } </script>

（2）表单界面展示

（3）结果展示

如下图，我们可以看到图片转化为 base64 格式的结果，以及表单成功提交，数据传到后端：

（二）接下来数据传到后端处理：

1. config.py

该文件用来进行 mongodb 的配置，把他独立出来的好处在于：当你的项目比较大的时候，如果你的配置信息发生变化，你可以直接在配置文件中修改。

# 此文件用来配置数据库信息 HOST = 'localhost' PORT = 27017 DATABASE_NAME = 'test'

2. connect.py

该文件用来进行 mongodb 的连接。

``` # 此文档用来连接数据库 import sys sys.path.append('..') import config from pymongo import MongoClient class Mongo: def __init__(self,host= None,port = None ,db_name = None): ''' Description: 构造函数，初始化数据库参数 Input: host: 主机名，默认读取config.HOST port：端口号，默认读取config.PORT db_name：数据库名称，默认读取config.DATABASE_NAME Return: Object ''' self.host=host or config.HOST or'127.0.0.1' self.port=port or config.PORT or '27017' self.db_name = db_name or config.DATABASE_NAME or 'test' def connect(self): ''' Description: 连接到数据库 Return: 数据库对象 Error return: None ''' try: myclient = MongoClient(self.host,self.port) mydb = myclient[self.db_name] return mydb except Exception as e: print(e) return None else: return mydb ```

3. runserver.py

该文件用来进行前端请求的处理，将数据存到mongodb以及将数据传回前端页面展示。

``` from flask import Flask,render_template,request,url_for import connect import base64 app=Flask(__name__) TEMPLATES_AUTO_RELOAD = True SEND_FILE_MAX_AGE_DEFAULT = 0 mongo=connect.Mongo() db=mongo.connect() mycol = db["user"] # 主页面 @app.route('/', methods=['GET', 'POST']) def home(): return render_template('file.html') @app.route('/upload',methods=['POST']) def upload(): # upload_file = request.files.get('file') # print(upload_file) other = request.form["name"] print(other) mydict={"id":request.form["id"],"name":request.form["name"],"balance":request.form["balance"],"photo":request.form["show"]} mycol.insert_one(mydict) for x in mycol.find(): print(x) return "sucessful" @app.route('/show',methods=['GET']) def show(): return render_template('data.html',mycol=mycol) if __name__ == '__main__': app.run(debug=True)

（三）前端展示结果

1. data.html

该页面用来在前端展示接收到的数据。

（1）代码

<!DOCTYPE html> <title>展示数据</title> <h1>展示数据</h1> <style> table, th, td { border: 1px solid red; height: 30px; } table { border-collapse: collapse; } th, td { width: 300px; text-align: center; } .img { width: 30px; height: 30px; } </style> <body> <table> <tr> <th>id</th> <th>name</th> <th>balance</th> <th>photo</th> </tr> {% for x in mycol.find() %} <tr> <td>{{x.id}}</td> <td>{{x.name}}</td> <td>{{x.balance}}</td> <td><img src={{x.photo}} class="img"></td> </tr> {% endfor %} </table> </body>

（2）页面结果展示

将页面url改成 http://127.0.0.1:5000/show ，就可以看到类似的结果啦！

最新回复(0)