我的路由代码是：
@app.route('/index', methods=['GET', 'POST'])
def user_upload_file():
global data
if request.method == 'POST':
allowed_formats = ['pdf', 'doc', 'docx', 'jpg', 'png']
files = request.files.get('pdf' or 'doc' or 'docx' or 'jpg' or 'png')
if files and files.filename.endswith(tuple(allowed_formats)):
basepath = os.path.dirname(__file__) # 当前文件所在路径
filepath = os.path.join(basepath, 'files', files.filename)
# 注意：没有的文件夹一定要先创建，不然会提示没有该路径
filepath = os.path.abspath(filepath) # 将路径转换为绝对路径
files.save(filepath)
if not files.filename.endswith('.pdf'):
# global_var = filepath
comtypes.CoInitialize()
# return 'File uploaded successfully.'
global_var = convert_to_pdf(filepath)
else:
global_var = filepath
filtered_name,filtered_age, filtered_collage, filtered_phnum, filtered_email=request_webimage(global_var)
data = {
'filtered_name': filtered_name or '',
'filtered_age': filtered_age or '',
'filtered_collage': filtered_collage or '',
'filtered_phnum': filtered_phnum or '',
'filtered_email': filtered_email or ''
}
else:
data={}
print(f"filtered_name: {data['filtered_name']}, filtered_age: {data['filtered_age']}, filtered_collage: {data['filtered_collage']}, filtered_phnum: {data['filtered_phnum']}, filtered_email: {data['filtered_email']}") #此处可以正常输出每一项的内容
return render_template('index.html', filtered_name=data['filtered_name'], filtered_age=data['filtered_age'], filtered_collage=data['filtered_collage'], filtered_phnum=data['filtered_phnum'], filtered_email=data['filtered_email'])
else:
return render_template('index.html', data={})
我的html代码是：
<!DOCTYPE html>
<html>
<head>
<title>用户端</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css">
<script>
function handleDrop(event) {
event.preventDefault();
var file = event.dataTransfer.files[0];
var formData = new FormData();
formData.append('pdf', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/index', true);
xhr.onload = function () {
if (xhr.status === 200) {
alert('文件上传成功');
location.reload();
} else {
alert('文件上传失败');
}
};
xhr.send(formData);
}
function handleDragOver(event) {
event.preventDefault();
}
</script>
</head>
<body>
<script src="js/flexible.js"></script>
<div class="section">
<div class="container">
<h1 class="title">Upload PDF</h1>
<form onsubmit="submitForm(event)" enctype="multipart/form-data">
<div class="field">
<div class="file has-name">
<label class="file-label">
<input class="file-input" type="file" name="" accept="application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, image/jpeg, image/png">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name">No file chosen</span>
</label>
</div>
</div>
<div class="drop-zone" ondrop="handleDrop(event)" ondragover="handleDragOver(event)" value="Upload">
<p>将PDF文件拖拽到此处</p>
</div>
<div class="field">
<div class="control">
<input class="button is-primary" type="submit" value="Upload">
</div>
</div>
</form>
<h1 class="title">个人信息</h1>
<div class="field">
<label class="label" for="title" style="display: inline-block; width: 100px;">姓名：</label>
<input class="input" type="text" id="name" name="name" value="{{ filtered_name }}" readonly>
</div>
<div class="field">
<label class="label" for="title" style="display: inline-block; width: 100px;">年龄：</label>
<input class="input" type="text" id="age" name="age" value="{{ filtered_age }}" readonly>
</div>
<div class="field">
<label class="label" for="title" style="display: inline-block; width: 100px;">学历：</label>
<input class="input" type="text" id="collage" name="collage" value="{{ filtered_collage }}" readonly>
</div>
<div class="field">
<label class="label" for="title" style="display: inline-block; width: 100px;">电话：</label>
<input class="input" type="text" id="phnum" name="phnum" value="{{ filtered_phnum }}" readonly>
</div>
<div class="field">
<label class="label" for="title" style="display: inline-block; width: 100px;">邮箱：</label>
<input class="input" type="text" id="email" name="email" value="{{ filtered_email }}" readonly>
</div>
</div>
</div>
</body>
</html>
路由中可以正确输出每一项，但前端页面无法在inputbox中显示对应的内容？
你在访问index的时候，默认是GET方法，所以data={}。你的所有数据都在POST方法里，所以你得做一次提交后，才能显示你的这些数据。
如果你已经了解这个逻辑，那可以看看数据是否已经正确返回给了HTML端。
问题点: 路由数据无法传输至前端页面显示
分析： 网页请求方式为 GET,返回值 data={}