我对 Flask 很陌生,我正在尝试创建一个简单的图像上传应用程序。
我已经对照关于如何创建此类应用程序的其他指南检查了我的代码,我的代码看起来没问题,但是当我尝试实际提交图像时,它说“在服务器”。我想我的 js 中可能有错误,因为控制台没有记录“成功”,但我不确定如何解决这个问题。任何帮助将不胜感激和需要。
我的js和html代码:
$(document).ready(function() {
$("submission").click(function() {
var form_data = new FormData($('#submit_file')[0]);
$.ajax({
type: 'POST',
url: '/submit_image',
data: form_data,
contentType: false,
cache: false,
processData: false,
success: function(data) {
console.log("success");
}
})
})
})
<body>
<h1>Image Upload</h1>
<form action="/submit_image" id = "submit_file">
<input type="file" id="image_file" name="image_to_be_uploaded">
<input type="submit" id="submission">
</form>
</body>
这是我的 python/flask 代码:
@app.route('/submit_image', methods=['POST'])
def submit_image():
if request.method == 'POST':
file_val = request.files['file']
#if file_val.filename != '':
file_val.save(file_val.filename)
return redirect(url_for('index'))
@app.errorhandler(413)
def too_large(e):
return "File is too large", 413
答案 0 :(得分:0)
您的 javascript 代码永远不会被执行。表单以其标准行为传输。
由于您还没有指定属性方法,因此表单以 GET 方法传输。
<form
name="submit_image"
action="{{ url_for('submit_image') }}"
method="post"
enctype="multipart/form-data"
>
<input type="file" name="image" />
<input type="submit" />
</form>
根据名称查询传输的表单数据。
@app.route('/submit_image', methods=['GET', 'POST'])
def submit_image():
if request.method == 'POST':
file_val = request.files['image']
# if file_val.filename != '':
# Handle empty filename here!
file_val.save(file_val.filename)
return redirect(url_for('index'))
return render_template('submit_image.html')
现在它应该可以在没有 javascript 的情况下工作了。
如果您想通过 Javascript 代码发送图像并使用提交按钮,我建议您也使用表单的提交事件。 preventDefault
函数抑制表单的标准行为。
$(document).ready(function() {
$("form[name='submit_image']").submit(function(event) {
event.preventDefault();
const formData = new FormData($(this)[0]);
$.ajax({
type: $(this).attr("method"),
url: $(this).attr("action"),
data: formData,
contentType: false,
cache: false,
processData: false,
success: function(data) {
console.log("success");
}
});
});
});
它现在应该可以工作了。
以下代码是一个示例,说明如何将文件保存在文件夹中并再次提供它们。您将需要创建一个新文件夹。 "
import os
from flask import (
current_app,
redirect,
render_template,
request,
send_from_directory
)
from werkzeug.utils import secure_filename
def allowed_file(filename):
allowed_extensions = current_app.config.get(
'ALLOWED_EXTENSIONS',
{ 'png', 'jpg', 'jpeg', 'gif' }
)
return '.' in filename and \
filename.rsplit('.', 1)[1].lower() in allowed_extensions
@app.route('/submit_image', methods=['GET', 'POST'])
def submit_image():
dest_folder = current_app.config.get('UPLOAD_FOLDER', 'images')
if request.method == 'POST':
if 'image' not in request.files:
return redirect(request.url)
file_val = request.files['image']
if file_val.filename == '':
return redirect(request.url)
if file_val and allowed_file(file_val.filename):
dest = os.path.join(
current_app.instance_path,
dest_folder,
secure_filename(file_val.filename))
file_val.save(dest)
images = os.listdir(os.path.join(
current_app.instance_path,
dest_folder))
return render_template('submit_image.html', images=images)
@app.route('/serve_image/<path:filename>')
def serve_image(filename):
dest_folder = current_app.config.get('UPLOAD_FOLDER', 'images')
return send_from_directory(
os.path.join(current_app.instance_path, dest_folder),
filename
)
<h1>Image Upload</h1>
<form
name="submit_image"
action="{{ url_for('submit_image') }}"
method="post"
enctype="multipart/form-data"
>
<input type="file" name="image" accept="image/*" />
<input type="submit" />
</form>
<table>
{% for img in images -%}
<tr>
<td>
<img
src="{{ url_for('serve_image', filename=img) }}"
style="width: 84px; height: auto;" />
</td>
<td>
<a
href="{{ url_for('serve_image', filename=img) }}"
target="_blank"
>{{ img }}</a>
</td>
</tr>
{% endfor -%}
</table>