英文:
Newby struggling with very simple Python / HTML routine
问题
请温柔一点。我正在尝试学习一些Python/Flask和HTML知识，对于一个非常简单的练习，我正在尝试编写一个程序：
- 在本地打开一个网页浏览器。
- 提示用户选择本地图片。
- 在网页上显示该图片。
这些都是本地操作 - 最终我希望将其迁移到云端，但现在我只是想让它在本地工作。
然而，当我的程序执行时，我没有得到完整的图片 - 只有一个通用的"上传的照片"图标。
上传界面：
结果：
以下是我的代码：
FlyFinderWeb.py:
from flask import Flask, render_template, request, redirect, url_for, send_from_directory
import os
app = Flask(__name__)
UPLOAD_FOLDER = 'uploads'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
@app.route('/', methods=['GET', 'POST'])
def upload_photo():
if request.method == 'POST':
if 'photo' not in request.files:
return redirect(request.url)
photo = request.files['photo']
if photo.filename == '':
return redirect(request.url)
if photo:
filename = os.path.join(app.config['UPLOAD_FOLDER'], photo.filename)
photo.save(filename)
return redirect(url_for('display_photo', filename=photo.filename))
return render_template('upload.html')
@app.route('/display/<filename>')
def display_photo(filename):
print(os.path.join(app.config['UPLOAD_FOLDER'], filename))
return render_template('display.html', filename=filename)
app.run(debug=True, use_reloader=True) #automatically restart server if changes are detected
if __name__ == '__main__':
app.run(debug=True)
Upload.html
<!doctype html>
<html>
<head>
<title>Upload and Display Photo</title>
</head>
<body>
<h1>Upload a Photo Please 3.0</h1>
<form method="POST" enctype="multipart/form-data">
<input type="file" name="photo" accept=".jpg, .jpeg, .png" title="Select File">
<input type="submit" value="Upload">
</form>
</body>
</html>
Display.html
<!doctype html>
<html>
<head>
<title>Display Photo</title>
<style>
.image-container {
text-align: center;
margin-bottom:;
}
.image-container img {
max-width: 100%;
max-height: 400px;
}
</style>
</head>
<body>
<h1>Uploaded Photo</h1>
<div class="image-container">
<img src="{{ url_for('display_photo', filename=filename) }}" alt="Uploaded Photo">
</div>
<p>Would you like to repeat another?</p>
<a href="{{ url_for('upload_photo') }}">Upload Another</a>
</body>
</html>
这是目录结构：
英文:
please be gentle. I'm trying to learn some Python / Flask and HTML and for a very simple exercise I'm trying to write a routine that:
Opens a web browser locally.
Prompts the user to select a local image
Displays the image on the web page.
It's all local stuff - eventually I'd like to move this into the cloud but right now I'm just trying to get it to work locally.
However when my program executes I am not getting a full image - only a generic "uploaded Photo" icon.
The upload screen:
The result:
Here is my code:
FlyFinderWeb.py:
from flask import Flask, render_template, request, redirect, url_for, send_from_directory
import os
app = Flask(__name__)
UPLOAD_FOLDER = 'uploads'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
@app.route('/', methods=['GET', 'POST'])
def upload_photo():
if request.method == 'POST':
if 'photo' not in request.files:
return redirect(request.url)
photo = request.files['photo']
if photo.filename == '':
return redirect(request.url)
if photo:
filename = os.path.join(app.config['UPLOAD_FOLDER'], photo.filename)
photo.save(filename)
return redirect(url_for('display_photo', filename=photo.filename))
return render_template('upload.html')
@app.route('/display/<filename>')
def display_photo(filename):
print(os.path.join(app.config['UPLOAD_FOLDER'], filename))
return render_template('display.html', filename=filename)
app.run(debug=True, use_reloader=True) #automatically restart server if changes are detected
if __name__ == '__main__':
app.run(debug=True)
Upload.html
<!doctype html>
<html>
<head>
<title>Upload and Display Photo</title>
</head>
<body>
<h1>Upload a Photo Please 3.0</h1>
<form method="POST" enctype="multipart/form-data">
<input type="file" name="photo" accept=".jpg, .jpeg, .png" title="Select File">
<input type="submit" value="Upload">
</form>
</body>
</html>
Display.html
<!doctype html>
<html>
<head>
<title>Display Photo</title>
<style>
.image-container {
text-align: center;
margin-bottom:;
}
.image-container img {
max-width: 100%;
max-height: 400px;
}
</style>
</head>
<body>
<h1>Uploaded Photo</h1>
<div class="image-container">
<img src="{{ url_for('display_photo', filename=filename) }}" alt="Uploaded Photo">
</div>
<p>Would you like to repeat another?</p>
<a href="{{ url_for('upload_photo') }}">Upload Another</a>
</body>
</html>
here is the directory structure:
答案1
得分: 0
你已成功上传了照片。然而，在查看时，你应该区分文件名和图像数据。客户端无法直接使用文件名访问图像，而是需要图像数据来显示图像，服务器可以使用文件名发送图像数据。
为了提供图像数据，你需要另一个端点。
@app.route('/download/<path:filename>')
def download_photo(filename):
return send_from_directory(
os.path.abspath(app.config['UPLOAD_FOLDER']),
filename
)
然后需要在display.html文件中更改img标签的src属性的URL。
<div class="image-container">
<img src="{{ url_for('download_photo', filename=filename) }}" alt="Uploaded Photo">
</div>
英文:
You have successfully managed to upload the photo. When viewing, however, you should distinguish between the file name and the image data. The client cannot access the image directly using the name, but needs the image data to display the image, which can be sent by the server using the file name.
To serve the image data you need another endpoint.
@app.route('/download/<path:filename>')
def download_photo(filename):
return send_from_directory(
os.path.abspath(app.config['UPLOAD_FOLDER']),
filename
)
Then it is necessary to change the URL for the src attribute of the img tag in the display.html file.
<div class="image-container">
<img src="{{ url_for('download_photo', filename=filename) }}" alt="Uploaded Photo">
</div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论