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

最新推荐文章于 2024-02-27 15:45:11 发布

&雨后&

最新推荐文章于 2024-02-27 15:45:11 发布

阅读量3.3k

点赞数 5

分类专栏： python 文章标签： jquery ajax + python flask + mongod 前后端数据交互传图片到后端图片转化为base64 mongodb的配置和连接

本文链接：https://blog.csdn.net/louiser_go/article/details/102858328

版权

本文介绍了如何使用jQuery AJAX、Python Flask框架和MongoDB进行前后端图片数据交互。首先，前端通过HTML表单上传图片并将其转换为base64格式，然后使用AJAX将数据发送到后端。在后端，配置了MongoDB，处理接收到的数据并存储。最后，前端展示接收到的数据。

摘要由CSDN通过智能技术生成

前言：博主最近开始学习使用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()将表单的所有信息传到后端。

⭐具体实现是：

当上传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&#

最低0.47元/天解锁文章

&雨后&

关注

5
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
前后端数据（图片）交互（jquery ajax + python flask + mongodb）

前言：博主最近开始学习使用flask框架进行开发，遇到的第一个小问题是：从前端将照片发送到后端，并从后端处理后将数据根据一定的格式展现出来。尝试了很多种解决方案之后，记录下我的最终解决方法~文章目录（一）前端传数据到后端1. file.html（1）代码（2）表单界面展示（3）结果展示（二）接下来数据传到后端处理：1. config.py2. connect.py3. runserver.py（...
复制链接

扫一扫

专栏目录