• 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>
  • 相关阅读:
    I/O多路复用技术
    Lua调试函数 debug.getinfo() namewhat详解
    L85.linux命令每日一练 -- 第12章 Linux系统常用内置命令(一)
    字节跳动笔试题——算法岗
    Vue 封装一个函数，小球原始高度不固定，弹起比例不固定、计算谈几次后，高度低于1米
    分类问题经典算法 | 二分类问题 | Logistic回归：梯度下降
    与AP、IB、预科相比,A-Level有哪些优势？
    21天学习挑战：经典算法---快速排序
    SQL基础理论篇（九）：存储过程
    发布四大战略举措，亚马逊云科技看准了中国云市场的哪些新机会？
  • 原文地址：https://blog.csdn.net/ssunshining/article/details/126694480