Flask中设置img标签src为服务器本地文件路径遇404问题求助

文件成功保存到uploads文件夹但前端访问404，核心原因有两个：

1. Flask默认仅将static目录作为静态资源根目录，uploads不在默认可访问路径内，直接用文件系统路径请求会被Flask拒绝，返回404。
2. 服务器本地绝对路径属于浏览器安全限制范畴，浏览器禁止加载本地资源以避免风险。

1. 添加上传文件的访问路由 #

在Flask中新增专门路由，让uploads目录下的文件可通过HTTP请求访问：

import os
from flask import Flask, request, send_from_directory
from werkzeug.utils import secure_filename

app = Flask(__name__)
# 配置上传文件夹的绝对路径，避免跨环境路径问题
app.config["UPLOAD_FOLDER"] = os.path.join(os.path.dirname(os.path.abspath(__file__)), "uploads")
# 确保上传文件夹存在，避免保存文件时出错
os.makedirs(app.config["UPLOAD_FOLDER"], exist_ok=True)

# 新增：处理上传文件的访问请求
@app.route('/uploads/<filename>')
def uploaded_file(filename):
    return send_from_directory(app.config["UPLOAD_FOLDER"], filename)

2. 修改保存接口，返回可访问URL #

替换原文件路径返回逻辑，返回浏览器能直接请求的URL：

@app.route("/save", methods=["POST"])
def save():
    image = request.files.get("image")
    if not image:
        return {"error": "未上传文件"}, 400
    
    file_name = secure_filename(image.filename)
    # 过滤无效文件名，避免路径遍历攻击
    if not file_name:
        return {"error": "文件名格式无效"}, 400

    file_path = os.path.join(app.config["UPLOAD_FOLDER"], file_name)
    image.save(file_path)

    # 返回HTTP可访问的URL，而非文件系统路径
    file_url = f"/uploads/{file_name}"
    return {"url": file_url}

3. 前端适配返回的URL #

修改前端JS逻辑，使用返回的url字段设置图片src：

document.querySelector('#upload').addEventListener('click', async function(e){
    e.preventDefault();

    let file = document.getElementById("uploaded-img").files[0]; 
    if (!file) return; // 增加无文件时的判断

    fd = new FormData();
    fd.append("image", file, file.name);

    let res = await fetch("/save",{
       method: "post",
       body: fd
    });
    let response = await res.json(); 

    let imgUrl = response.url;
    document.getElementById("img").setAttribute("src", imgUrl);
});

额外安全提示 #

• 不要跳过secure_filename的处理：它会过滤掉包含路径的恶意文件名（如../../malware.exe），避免路径遍历攻击。
• 可添加文件类型校验：仅允许上传图片等合法文件类型，减少安全风险。
• 生产环境建议用Nginx等反向代理处理静态文件请求，性能优于Flask自带的静态资源处理。

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