• 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>
  • 相关阅读:
    电脑版微信文件存储在哪个文件夹可以找到
    Linux vim
    在Visual Studio/Qt Creator 中使用CMake安装和使用vcpkg包
    YJ的2022CSP游记
    Django REST Framework API和RESTful接口规范
    弱监督目标检测：ALWOD: Active Learning for Weakly-Supervised Object Detection
    WZOI-260近在咫尺
    没有事情做 随手写的小程序
    太厉害了，终于有人能把文件上传漏洞讲的明明白白了
    【华为OD机试】生成哈夫曼树【C卷|100分】
  • 原文地址：https://blog.csdn.net/ssunshining/article/details/126694480