树莓派Linux环境下，用HTML/JS编辑本地JSON配置Python RFID图片关联

核心思路 #

在树莓派本地搭建一个轻量Python后端（用Flask，简单易上手），处理HTML表单的提交请求，将RFID ID与对应文件路径整理成字典格式，写入JSON文件；你的Python RFID应用直接读取这个JSON文件即可加载字典。

步骤1：调整HTML表单结构 #

确保表单能传递每个RFID ID和对应的文件选择/路径信息，用数组式name属性让后端能批量接收数据：

<!DOCTYPE html>
<html>
<head>
    <title>RFID图片配置</title>
</head>
<body>
    <h1>RFID关联配置编辑</h1>
    <!-- 表单指定POST提交到后端接口，如需上传文件要加enctype -->
    <form method="POST" action="/save-config" enctype="multipart/form-data">
        <table border="1">
            <thead>
                <tr>
                    <th>RFID ID</th>
                    <th>解剖位置</th>
                    <th>关联文件</th>
                </tr>
            </thead>
            <tbody>
                <!-- 示例行，可根据实际预设ID动态生成 -->
                <tr>
                    <td>RFID_001</td>
                    <td>心脏</td>
                    <td>
                        <input type="hidden" name="ids[]" value="RFID_001">
                        <input type="file" name="files[]" accept="image/*, image/gif">
                        <span>当前关联：无</span>
                    </td>
                </tr>
                <tr>
                    <td>RFID_002</td>
                    <td>肺部</td>
                    <td>
                        <input type="hidden" name="ids[]" value="RFID_002">
                        <input type="file" name="files[]" accept="image/*, image/gif">
                        <span>当前关联：无</span>
                    </td>
                </tr>
            </tbody>
        </table>
        <br>
        <button type="submit">保存配置</button>
    </form>
</body>
</html>

如果不需要上传文件（图片已放在固定目录），可以把input[type="file"]换成input[type="text"]，让用户直接填写文件路径，更简单：

<input type="text" name="files[]" placeholder="输入图片路径（如./images/heart.gif）">

步骤2：搭建Flask后端处理提交 #

1. 先安装Flask：

pip install flask

2. 编写后端脚本config_server.py：

from flask import Flask, request
import json
import os

app = Flask(__name__)

# 配置文件和图片存储路径（根据你的树莓派实际路径调整）
CONFIG_PATH = "/home/pi/rfid_config.json"
IMAGE_STORE = "/home/pi/rfid_images"

# 确保图片存储目录存在
os.makedirs(IMAGE_STORE, exist_ok=True)

# 加载现有配置并渲染编辑页面
@app.route('/')
def show_config_page():
    # 读取已有的配置，没有则初始化空字典
    try:
        with open(CONFIG_PATH, 'r') as f:
            current_config = json.load(f)
    except FileNotFoundError:
        current_config = {}

    # 预设的ID与解剖位置映射（可根据实际需求修改或从其他文件读取）
    id_anatomy_map = {
        "RFID_001": "心脏",
        "RFID_002": "肺部",
        "RFID_003": "肝脏"
    }

    # 动态生成表格行
    table_rows = ""
    for rfid_id, anatomy in id_anatomy_map.items():
        saved_file = current_config.get(rfid_id, "无")
        table_rows += f'''
        <tr>
            <td>{rfid_id}</td>
            <td>{anatomy}</td>
            <td>
                <input type="hidden" name="ids[]" value="{rfid_id}">
                <input type="file" name="files[]" accept="image/*, image/gif">
                <span>当前关联：{saved_file}</span>
            </td>
        </tr>
        '''

    # 返回完整HTML页面
    return f'''
    <!DOCTYPE html>
    <html>
    <head>
        <title>RFID图片配置</title>
    </head>
    <body>
        <h1>RFID关联配置编辑</h1>
        <form method="POST" action="/save-config" enctype="multipart/form-data">
            <table border="1">
                <thead>
                    <tr>
                        <th>RFID ID</th>
                        <th>解剖位置</th>
                        <th>关联文件</th>
                    </tr>
                </thead>
                <tbody>{table_rows}</tbody>
            </table>
            <br>
            <button type="submit">保存配置</button>
        </form>
    </body>
    </html>
    '''

# 处理表单提交，保存为JSON
@app.route('/save-config', methods=['POST'])
def save_config():
    ids = request.form.getlist('ids[]')
    files = request.files.getlist('files[]')

    # 读取现有配置，保留未修改的项
    try:
        with open(CONFIG_PATH, 'r') as f:
            config = json.load(f)
    except FileNotFoundError:
        config = {}

    # 更新配置：处理上传的文件并保存路径
    for rfid_id, file in zip(ids, files):
        if file.filename != '':
            # 保存文件到指定目录
            file_full_path = os.path.join(IMAGE_STORE, file.filename)
            file.save(file_full_path)
            # 保存相对路径（方便Python应用读取）
            config[rfid_id] = os.path.relpath(file_full_path, os.path.dirname(CONFIG_PATH))

    # 写入JSON文件
    with open(CONFIG_PATH, 'w') as f:
        json.dump(config, f, indent=4)

    # 返回保存成功提示
    return '''
    <!DOCTYPE html>
    <html>
    <body>
        <h1>配置保存成功！</h1>
        <a href="/">返回编辑页</a>
    </body>
    </html>
    '''

if __name__ == '__main__':
    # 允许树莓派本地所有设备访问，端口设为5000
    app.run(host='0.0.0.0', port=5000, debug=True)

步骤3：Python RFID应用加载JSON #

在你的原有Python脚本中，直接读取生成的JSON文件即可得到字典：

import json

CONFIG_PATH = "/home/pi/rfid_config.json"

# 加载RFID ID到文件路径的字典
with open(CONFIG_PATH, 'r') as f:
    rfid_to_file = json.load(f)

# 使用示例：当扫描到RFID时
scanned_rfid = "RFID_001"
if scanned_rfid in rfid_to_file:
    target_file = rfid_to_file[scanned_rfid]
    # 这里添加你的图片/GIF显示逻辑（如用PIL、pygame等库）
    print(f"显示文件：{target_file}")

注意事项 #

1. 权限问题：确保树莓派用户对CONFIG_PATH和IMAGE_STORE目录有读写权限，可执行：

sudo chown pi:pi /home/pi/rfid_config.json /home/pi/rfid_images

2. 简化版可选：如果不需要上传文件，直接让用户输入路径，可修改后端的save-config接口，去掉文件上传逻辑，直接保存表单输入的路径：

@app.route('/save-config', methods=['POST'])
def save_config():
    ids = request.form.getlist('ids[]')
    file_paths = request.form.getlist('files[]')
    config = dict(zip(ids, file_paths))
    
    with open(CONFIG_PATH, 'w') as f:
        json.dump(config, f, indent=4)
    
    return '''
    <!DOCTYPE html>
    <html>
    <body>
        <h1>配置保存成功！</h1>
        <a href="/">返回编辑页</a>
    </body>
    </html>
    '''

内容的提问来源于stack exchange，提问作者user3568395