• FastApi和Ajax传输图片

    一、FastApi与Ajax的网络通信

    需要注意的点：

    1.跨域问题：在fastapi中设置即可（见代码）

    2.字段一致性：服务器端规定的字段名和客户端的字段名称保持一致

    python服务端：

    1. # -*- coding: utf-8 -*-
    2.  
    3. import json
    4. import uvicorn
    5. from fastapi import FastAPI
    6. from pydantic import BaseModel
    7. from fastapi.middleware.cors import CORSMiddleware
    8.  
    9. # 创建数据模型
    10. class Item(BaseModel):
    11.     name: str
    12.     age: int
    13.  
    14. app = FastAPI()
    15.  
    16. # 后台api允许跨域
    17. app.add_middleware(
    18.     CORSMiddleware,
    19.     allow_origins=["*"],
    20.     allow_credentials=True,
    21.     allow_methods=["*"],
    22.     allow_headers=["*"],
    23. )
    24.  
    25.  
    26. @app.get("/demo")
    27. async def root():
    28.     return 'Hello World!'
    29.  
    30.  
    31. @app.post("/demo")
    32. async def fcao_predict(item: Item):
    33.     item_dict = item.dict()
    34.     print(item)
    35.     if item.name:
    36.  
    37.         item_dict.update({"name": item.name,
    38.                           "age": item.age})
    39.         return item_dict
    40.         # return json.dumps(item_dict)
    41.  
    42. if __name__ == '__main__':
    43.     uvicorn.run(app=app, host='0.0.0.0', port=5000, debug=True)

    客户端：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>testFastApititle>
    7.     <script src="./lib/jquery.js">script>
    8. head>
    9.  
    10. <body>
    11.     <button id="btn">发送请求button>
    12.     <script>
    13.         params = {
    14.             name: 'abc',
    15.             age: 100
    16.         }
    17.         $('#btn').click(function () {
    18.             $.ajax({  //发送ajax请求
    19.                 url: 'http://127.0.0.1:5000/demo',
    20.                 type: "post",
    21.                 async: true,
    22.                 headers: { 'Content-Type': 'application/json;charset=utf8' },  //(在参数都正确的情况下)，加上这行防止422错误
    23.                 // dataType:"JSON",
    24.                 data: JSON.stringify(params),
    25.                 success: function (res) {
    26.                     // res = JSON.parse(res);  //如果以python字典方式返回则不需要进行parse,如果以json方式返回则需要JSON.parse
    27.                     console.log(res.name);
    28.                     console.log(res)
    29.                     alert(res.age);
    30.                 },
    31.                 error: function () {
    32.                     console.log("网络请求错误!");
    33.                 }
    34.             });
    35.         });
    36.  
    37.     script>
    38. body>
    39.  
    40. html>

    二、FastApi与Ajax通过Base64传输图片

    需要注意的点：

    js解析得到base64有一段前置的base64标识，在python端进行解析的时候需要去掉:

     服务端：

    1. # -*- coding: utf-8 -*-
    2.  
    3. import json
    4. import cv2
    5. import base64
    6. import numpy as np
    7. import uvicorn
    8. from fastapi import FastAPI
    9. from pydantic import BaseModel
    10. from fastapi.middleware.cors import CORSMiddleware
    11.  
    12.  
    13. def img2str(cv_img):
    14.     retval, buffer = cv2.imencode('.png', cv_img)
    15.     pic_str = base64.b64encode(buffer)
    16.     pic_str = pic_str.decode()
    17.     return pic_str
    18.  
    19. def str2img(pic_str):
    20.     img_data = base64.b64decode(pic_str)
    21.     nparr = np.frombuffer(img_data, np.uint8)
    22.     img_np = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
    23.     return img_np
    24.  
    25. # 创建数据模型
    26. class Item(BaseModel):
    27.     data: str
    28.  
    29. app = FastAPI()
    30.  
    31.  
    32. # 后台api允许跨域
    33. app.add_middleware(
    34.     CORSMiddleware,
    35.     allow_origins=["*"],
    36.     allow_credentials=True,
    37.     allow_methods=["*"],
    38.     allow_headers=["*"],
    39. )
    40.  
    41.  
    42. @app.get("/bs64")
    43. async  def root():
    44.     return 'Hello World!'
    45.  
    46. @app.post("/bs64")
    47. async def fcao_predict(item: Item):
    48.     # print(item)
    49.     # item_dict = item.dict()
    50.     # print(item)
    51.  
    52.     
    53.     if item.data:
    54.         print(item.data[0:100])
    55.         img_np = str2img(item.data.split('base64,')[1])
    56.         # cv2.imshow('img',img_np)
    57.  
    58.         str_img = img2str(img_np)
    59.         print("success")
    60.  
    61.         # cv2.waitKey(0)
    62.         res = json.dumps({"img": str_img})
    63.         return res
    64.  
    65. if __name__ == '__main__':
    66.     uvicorn.run(app=app,host='0.0.0.0', port=5000,debug=True)

     客户端：

    1. html>
    2. <html lang="en">
    3.  
    4.   <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.   head>
    10.  
    11.   <body>
    12.     <input type="file" id="Image" name="Image" />
    13.     <button onclick="sent()">sentbutton>
    14.     <script type="text/javascript" src="lib/jquery.js">script>
    15.     <script type="text/javascript">
    16.  
    17.       // 校验上传图片的格式
    18.       function checkImgType(file) {
    19.         //用文件名name后缀判断文件类型，可用size属性判断文件大小不能超过500k ， 前端直接判断的好处，免去服务器的压力。 
    20.         if (!/\.(jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name)) {
    21.           return false;
    22.         } else {
    23.           return true;
    24.         }
    25.       }
    26.  
    27.       function sent() {
    28.         var file = document.getElementById('Image');
    29.         openFile(file);
    30.       }
    31.  
    32.       //获取文件的后缀名
    33.       function getSuffix(file){
    34.         var fileName = file.name;
    35.         //获取最后一个.的位置
    36.         var index= fileName.lastIndexOf(".");
    37.         //获取后缀
    38.         var suffix = fileName.substr(index+1);
    39.         //输出结果
    40.         return suffix
    41.       }
    42.  
    43.       function openFile(file) {
    44.         var file = file.files[0]
    45.  
    46.         var suffix = getSuffix(file)
    47.         alert(suffix)
    48.  
    49.         if (!this.checkImgType(file)) { 
    50.           alert('上传的图片类型必须是.jpeg,jpg,png中的一种');
    51.           return;
    52.         } else {
    53.           var reader = new FileReader()
    54.           reader.readAsDataURL(file)
    55.           reader.onload = function (e) {
    56.             var bs64 = e.target.result;
    57.             ajaxUploadBase64File(bs64); //上传文件
    58.  
    59.           }
    60.         }
    61.  
    62.       }
    63.       //使用ajax上传
    64.       function ajaxUploadBase64File(base64Data) {
    65.         var url = "http://localhost:5000/bs64";
    66.         $.ajax({
    67.           url: url,
    68.           type: "post",
    69.           headers: { 'Content-Type': 'application/json;charset=utf8' },  //(在参数都正确的情况下)，加上这行防止422错误
    70.  
    71.           data: JSON.stringify({
    72.             data: base64Data
    73.           }),
    74.           success: function (res) {
    75.             // console.log(res.img)
    76.             res = JSON.parse(res)
    77.             console.log(res.img)
    78.             var img = new Image();
    79.             // img.src="data:image/png;base64,"+res.img;
    80.             img.src = "data:image/jpeg;base64," + res.img
    81.  
    82.             document.body.appendChild(img);  //在界面中显示图片
    83.  
    84.           },
    85.           error: function () {
    86.             console.log("上传失败");
    87.           }
    88.         });
    89.       };
    90.  
    91.     script>
    92.  
    93.   body>
    94.  
    95. html>
  • 相关阅读:
    基于JAVA在线考试系统计算机毕业设计源码+系统+数据库+lw文档+部署
    2022 9.4 小红书笔试
    IB心理学生物分析模块
    js识别爬虫，js识别手机，识别文章标题后js跳转
    SwiftUI 让用户更便捷在 App Store 为 App 打分和评价的超详细介绍
    去雨去雪去雾数据集构建
    Elasticsearch实战（十八）--ES搜索Doc Values/Fielddata 正排索引 深入解析
    进入软件行业的几点建议
    POI及EasyExcel【Java提高】
    免安装版的Mysql安装与配置——详细教程
  • 原文地址：https://blog.csdn.net/ssunshining/article/details/126694480