我如何在flask html模板上呈现新图像而不替换以前的图像?(python)

Question

我正在使用python和flask构建一个图像编辑应用程序，并希望在上传时显示两个或更多用户图像。一张图片可以正常工作，但是当下一张图片被上传时，它会在相同的空间替换之前的图片，而不是用之前的图片出现在页面上。我觉得我错过了一些重要的东西，不知道它是什么。

现在我是这样设置的:

Python:

@app.route('/', methods=['POST'])
def upload_content():
if 'file' not in request.files:
flash('No file part')
return redirect(request.url)
file = request.files['file']
if file.filename == '':
flash('No image selected for uploading')
return redirect(request.url)
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
print('upload_image filename: ' + filename, os.path.join(app.config['UPLOAD_FOLDER'], filename))
flash('Image successfully uploaded and displayed below')
global content
content = cv2.imread(os.path.join(os.getcwd(),app.config['UPLOAD_FOLDER']+'/'+filename), cv2.IMREAD_GRAYSCALE)
return render_template('index.html', filename=filename)
else:
flash('Allowed image types are - png, jpg, jpeg, gif')
return redirect(request.url)
#copy of method for style
@app.route('/', methods=['POST'])
def upload_style():
if 'file' not in request.files:
flash('No file part')
return redirect(request.url)
file = request.files['file']
if file.filename == '':
flash('No image selected for uploading')
return redirect(request.url)
if file and allowed_file(file.filename):
filenamejr = secure_filename(file.filename)
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filenamejr))
print('upload_image filename: ' + filenamejr, os.path.join(app.config['UPLOAD_FOLDER'], filenamejr))
flash('Image successfully uploaded and displayed below')
global style
style = cv2.imread(os.path.join(os.getcwd(),app.config['UPLOAD_FOLDER']+'/'+filenamejr), cv2.IMREAD_GRAYSCALE)
#content = image.img_to_array(content, dtype='uint8')
return display_image(filenamejr)
else:
flash('Allowed image types are - png, jpg, jpeg, gif')
return redirect(request.url)

@app.route('/display/<filename>')
def display_image(filename):
return redirect(url_for('static', filename='uploads/' + filename), code=301)

HTML:

<div class="container">
<div class="row">
<h2>Select a content image to upload</h2>
<p>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
</p>
<div>
<img src="{{ url_for('display_image', filename=filename) }}">
</div>
<form method="post" action="/" enctype="multipart/form-data">
<dl>
<p>
<input type="file" name="file" class="form-control" autocomplete="off" required>
</p>
</dl>
<p>
<input type="submit" value="Submit" class="btn btn-info">
</p>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type=text/javascript>
$(function() {
$('a#test').on('click', function(e) {
e.preventDefault()
$.getJSON('/maskInter/',
function() {
//do nothing
});
return false;
});
});
</script>
<div class="row">
<h2>Select a style image to upload</h2>
<p>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
</p>
<div>
<img src="{{ url_for('display_image', filename=filenamejr) }}">
</div>
<form method="post" action="/" enctype="multipart/form-data">
<dl>
<p>
<input type="file" name="file" class="form-control" autocomplete="off" required>
</p>
</dl>
<p>
<input type="submit" value="Submit" class="btn btn-info">
</p>
</form>
</div>

Answer 1

在导师的大力帮助下，我终于想通了。如果有人遇到类似的特定问题，这里是:

解决方案是使用flask中的session库组合两个python方法，在连接方法中指定内容和风格变量，并修改if语句来处理差异。这使得我们可以简化python和html。

app.py:

@app.route('/')
def home():
return render_template('index.html')

@app.route('/', methods=['POST'])
def upload_content():
if not any(f in ['content_file', 'style_file'] for f in request.files):
flash('No file part')
return redirect(request.url)
submitted_file = 'content_file' if 'content_file' in request.files else 'style_file'
file = request.files[submitted_file]
if file.filename == '':
flash('No image selected for uploading')
return redirect(request.url)
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
session[submitted_file] = filename
print('upload_image filename: ' + filename, os.path.join(app.config['UPLOAD_FOLDER'], filename))
flash('Image successfully uploaded and displayed below') 
return render_template('index.html')
else:
flash('Allowed image types are - png, jpg, jpeg, gif')
return redirect(request.url)

index . html:

<div class="container">
<div class="row">
<h2>Select a content image to upload</h2>
<p>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
</p>
<div>
<img src="{{ url_for('display_image', filename=session['content_file']) }}">
</div>
<form method="post" action="/" enctype="multipart/form-data">
<dl>
<p>
<input type="file" name="content_file" class="form-control" autocomplete="off" required>
</p>
</dl>
<p>
<input type="submit" value="Submit" class="btn btn-info">
</p>
</form>
<div class="row">
<h2>Select a style image to upload</h2>
<p>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
</p>
<div>
<img src="{{ url_for('display_image', filename=session['style_file']) }}">
</div>
<form method="post" action="/" enctype="multipart/form-data">
<dl>
<p>
<input type="file" name="style_file" class="form-control" autocomplete="off" required>
</p>
</dl>
<p>
<input type="submit" value="Submit" class="btn btn-info">
</p>
</form>
</div>