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

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

我的文件结构是：

|- templates
     |- data.html
     |- file.html
 |- __pycache__
     |- config.cpython-37.pyc
     |- connect.cpython-37.pyc
 |- config.py
 |- connect.py
 |- runserver.py

（一）前端传数据到后端

1. file.html

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

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

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

⭐具体实现是：

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

（1）代码

    

        填写id：
    
    

        填写name：
    
    

        填写balance：
    
    

        上传photo：
    
    

        photo64编码：
    

    提交

（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）代码

展示数据





    


        {% for x in mycol.find() %}
        
        {% endfor %}
    

        

            
id
            
name
            
balance
            
photo
        

            
{{x.id}}
            
{{x.name}}
            
{{x.balance}}
            


        

（2）页面结果展示

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