• 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——》线程的打断（停止正在运行的线程）
    虚拟机改IP地址
    Java NIO ：如何为通道注册多个事件及多线程处理 Accetp 请求
    Mysql通用日志（general）文件太大，如何定期清理与备份
    如何在 Wio Terminal 上运行 RT-Thread 操作系统
    element-ui封装loading，便于在拦截请求或其他场景使用
    vs调试技巧（详细）
    Gin学习记录4——Controller和中间件
    【linux】SourceForge 开源软件开发平台和仓库
    Java版本+企业电子招投标系统源代码+支持二开+招投标系统+中小型企业采购供应商招投标平台
  • 原文地址：https://blog.csdn.net/ssunshining/article/details/126694480