前端上传图片,Python后端接收

2023-11-18

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Upload</title>
</head>
<body>
    <h1>Image Upload</h1>
    <input type="file" id="imageInput">
    <button onclick="uploadImage()">Upload</button>
    <script>
        function uploadImage() {
            const imageInput = document.getElementById('imageInput');
            const file = imageInput.files[0];

            if (file) {
                const reader = new FileReader();
                reader.onload = function(event) {
                    const imageBase64 = event.target.result;
                    const data = {
                        image: imageBase64,
                        direction: 0
                    };

                    fetch('http://127.0.0.0:5000/slot_count', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(data)
                    })
                    .then(response => response.json())
                    .then(result => {
                        console.log(result);
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
                };
                reader.readAsDataURL(file);
            }
        }
    </script>
</body>
</html>

Python后端代码

import base64
from gevent import pywsgi
from flask import Flask, request, jsonify
from flask_cors import CORS
import numpy as np
import cv2
import traceback

app = Flask(__name__)
CORS(app, resources=r'/*')  # 跨域
app.config['JSON_AS_ASCII'] = False  # 返回显示中文


@app.route('/', methods=['GET'])
def verify_connect():
    return jsonify({'code': 200, 'msg': 'success', 'data': ["connection successful"]})


@app.route('/slot_count', methods=['POST'])
def predict():
    ret = []

    try:
        data = request.json
        direction = data['direction']
        print(direction)

        base64_image = data['image']
        image_data = base64.b64decode(base64_image.split(',')[-1])
        image = cv2.imdecode(np.frombuffer(image_data, np.uint8), cv2.IMREAD_COLOR)
        print(image.shape)

        cv2.imshow('img', image)
        cv2.waitKey()

        code = 200
        msg = "success"

    except ValueError as ve:
        traceback.print_exc()
        code = 400
        msg = str(ve)

    except Exception as e:
        traceback.print_exc()
        code = 500
        msg = str(e)

    result = {'code': code, 'msg': msg, 'data': ret}

    return jsonify(result)


if __name__ == '__main__':
    app.run('0.0.0.0', 5000, debug=True)
    # server = pywsgi.WSGIServer(('0.0.0.0', 5000), app)
    # server.serve_forever()

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端上传图片,Python后端接收 的相关文章

随机推荐

  • 深度学习里面正则化的理解

    一 正则化的概念与用处 正则化 也叫规范化 在神经网络里主要是对代价函数高次项添加一些惩罚 防止其过拟合 相当于对某些特征的权重施加惩罚 降低其影响权重 防止过拟合 欠拟合时需要去掉正则化 因为本来就特征不足 再惩罚一下就更没用了 正则化目
  • JCenter() 与 mavenCenter() 的区别

    网络上有两种Maven仓库 分别是mavenCenter 和jCenter 1 Maven Central 则是由sonatype org维护的Maven仓库 http jcenter bintray com 2 jcenter是一个由 b
  • ARM开发——搭建嵌入式开发环境

    ckermit串口工具的下载 sudo apt get install ckermit 如果我们有新的串口连接上 我们可以通过查看 dev 来看连接的数据 ckermit 配置文件的配置 kermrc set line dev ttyUSB
  • jemter接口测试+断言+参数化+接口关联实战教程

    此次实例准备 jmeter实战接口申请地址 https www tianapi com 实例信息 请求10次身份证归属地查询接口 提取响应数据的星座信息作为请求参数 给星座运势查询接口使用 即接口之间关联调用 下面是两个接口的基本信息 A
  • 【Unity】一个场景跳转到多个场景的解决方案

    在某些情况下 比如我们需要设计一个探索类游戏 那么一个场景可以根据选择的不同 跳转至多个场景 甚至能够回跳场景 那么在这种情况下 我们该如何进行多场景的精确跳转呢 思路 假设角色走到某一扇门时 场景将进行切换 如果场景切换是非线性的 那么就
  • python入门选择题

    下列哪个是Python的注释符号 A B C D 答案 B 解析 在Python中 使用 来进行注释 以 开头的行也被认为是注释 在Python中 如何将两个整数相除并得到一个浮点数 A 使用 运算符 B 使用 运算符 C 使用 运算符 D
  • office2021安装教程

    需要用到的工具 office tool plus https otp landian vip zh cn 进到官网点立即下载 下载 包含框架 推荐 下载好解压 运行officetool plus 选择部署 在这里可以看到电脑已存在的offi
  • Spring依赖注入

    一 什么是依赖注入 DI Dependency Injection 依赖注入是指在 Spring IOC 容器创建对象的过程中 将所依赖的对象通过配置进行注入 我们可以通过依赖注入的方式来降低对象间的耦合度 在软件工程中 对象之间的耦合度就
  • 三维重建-opencv实现sfm

    注意 本文中的代码必须使用OpenCV3 0或以上版本进行编译 因为很多函数是3 0以后才加入的 目录 SfM介绍 小孔相机模型 坐标系 内参矩阵 外参矩阵 相机的标定 SfM介绍 SfM的全称为Structure from Motion
  • Java 利用hutool工具实现导出excel并合并单元格

    Java 利用hutool工具实现导出excel并合并单元格 controller层调用service 就一个核心方法 没错就下面这个代码就能实现了 前提是项目里面要引用hutool包 把我这个复制到项目里面然后改掉字段应该能直接跑起来的
  • SQL Server统计数据库表空间大小和数据量

    SQL Server统计数据库表空间大小和数据量 在大数据环境中 对于SQL Server数据库的管理和优化是非常重要的 其中一个关键任务是统计数据库中各个表的空间大小和数据量 通过了解每个表所占用的存储空间 可以进行容量规划 性能优化和资
  • 虚拟机上的Ubuntu开机显示“无法应用原保存的显示器配置”

    如图 解决方法 删除monitors xml 文件 rm config monitors xml
  • pdf模板,java替换变量

    开发十年 就只剩下这套Java开发体系了 gt gt gt 1 创建pdf 现在word中创建模板 输出为pdf文件2 pdf 2 java项目引入依赖
  • 单片机时间戳转换

    看了网上的例程 大多繁琐 直接利用time h里的库函数进行转换即可 include
  • windows上传文件到ubuntu

    进入putty目录下 运行pscp 然后pscp 目标文件 Linux用户名 IP地址 目标文件夹 输入linux的登陆密码即可 more than one remote source not supported 出现这种情况是由空格导致的
  • Linux内核的编译、安装、调试

    这里写目录标题 编译安装内核 下载内核 安装依赖 更改 config 编译内核 安装 首先安装模块 安装内核 更改引导 更改 grub 重启 其他操作 清理内核源目录 卸载安装的内核 修改内核配置菜单实现对新加入内核源码的控制 常见问题 1
  • 8-13外部排序-败者树

    败者树是树形选择排序的一种变体 可视为一棵完全二叉树 通过败者树 可以在k个归并段中选出最小关键字所需要的关键字对比次数更少 绿色为叶子结点 存放初始数据 黑色为失败结点 蓝色为胜出结点 一 基本过程 以下按从小到大的方式构建 1 从8个归
  • Nor Flash,Nand Flash

    文章目录 1 Nor Flash 使用场景 2 Nand Flash 使用场景 3 读写速度对比 4 成本与容量 1 Nor Flash 使用场景 对于大多数应用较为简单的场景 比如 MCU 其内置的 Flash 就是使用的是 Nor Fl
  • python基础开发篇3——线上环境部署Django项目

    文章目录 一 基本了解 二 打包本地项目 三 服务器环境准备 四 安装web服务 4 1 使用uwsgi代理 4 2 使用nginx代理 推荐 五 部署daphne 一 基本了解 部署思路 Nginx服务接收浏览器的动态请求 再通过uwsg
  • 前端上传图片,Python后端接收

    前端代码 h1 Image Upload h1