Flask上传多张图片时未渲染全部动态HTML表格问题求解

问题根因 #

• 后端仅获取了第一张上传的文件，且处理完第一张后直接return返回响应，终止了其余文件的处理流程
• 前端模板仅支持渲染单条结果，没有做多结果循环渲染的逻辑

后端修改（app.py） #

首先将模型加载逻辑移到路由外层，避免每次请求重复加载浪费性能，再修改请求处理逻辑，遍历所有上传文件，汇总所有结果后再返回：

# 提前加载模型，服务启动时只加载一次
loaded_vec = CountVectorizer(vocabulary=pickle.load(open("model/tfidf_vector.pkl", "rb")))
loaded_tfidf = pickle.load(open("model/tfidf_transformer.pkl", "rb"))
model_pattern_type = pickle.load(open("model/clf_svm_Pattern_Category.pkl", "rb"))
model_pattern_category = pickle.load(open("model/clf_svm_Pattern_Type.pkl", "rb"))
dark_pattern_df = pd.read_csv("/Users/ri/Desktop/DPL/DP.csv")

@app.route('/', methods=['POST'])
def upload_image():
    if request.method == 'POST':
        if 'files' not in request.files:
            flash('No file part')
            return redirect(request.url)
        # 用getlist获取所有上传的文件
        files = request.files.getlist('files')
        if not files or all(f.filename == '' for f in files):
            flash('No file selected for uploading')
            return redirect(request.url)
        
        # 存储所有文件的处理结果
        result_list = []
        for file in files:
            if not allowed_file(file.filename):
                continue
            filename = secure_filename(file.filename)
            save_path = os.path.join(os.getcwd() + UPLOAD_INPUT_IMAGES_FOLDER, filename)
            file.save(save_path)
            flash(f'文件{filename}上传成功')
            extracted_text = ocr_processing(file)
            match = extracted_text.lower()
            res_item = {
                'match': match,
                'img_src': UPLOAD_INPUT_IMAGES_FOLDER + filename
            }
            # 匹配规则
            for row in dark_pattern_df.Pattern_String:
                result = ratio(row, match)
                if result >= 10:
                    X_new_counts = loaded_vec.transform([match])
                    X_new_tfidf = loaded_tfidf.transform(X_new_counts)
                    res_item['your_predicted_pattern_type'] = model_pattern_type.predict(X_new_tfidf)[0]
                    res_item['your_predicted_pattern_category'] = model_pattern_category.predict(X_new_tfidf)[0]
                    break
            result_list.append(res_item)
        # 所有文件处理完后统一返回
        return render_template('uploads/results.html', msg='全部处理完成', result_list=result_list)
    else:
        flash('Allowed file types are txt, pdf, png, jpg, jpeg, gif')
        return redirect(request.url)

前端模板修改（results.html） #

新增循环逻辑，遍历结果列表生成对应数量的表格：

{% for item in result_list %}
<table>
    <tbody>
    <tr>
        <th class="table-info">IMAGE PROVIDED</th>
        {% if item.img_src %}
        <td><img src="{{ item.img_src }}" alt="user-image" class="uploaded-image"></td>
        {% endif %}
    </tr>
    <tr>
        <!-- 其余字段按规则替换成item.xxx即可，比如item.match、item.your_predicted_pattern_category等 -->
    </tr>
    </tbody>
</table>
{% endfor %}

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