实现文件从 Angular 上传到 Flask

Question

我正在尝试为我的 Web 工具实现文件上传。前端使用angular开发，后端使用flask。按照 flask 网站上的教程，我设置了以下 flask 应用程序：

from flask import Flask, request
from werkzeug import secure_filename
import os

UPLOAD_FOLDER = '/home/openstack/Documents/Confmrg/bcknd/uploads'

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

@app.route('/uploader' , methods = ['GET' , 'POST'])
def upload_file():
    if request.method == 'POST':
        f = request.files['file']
        filename = secure_filename(f.filename)
        f.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
    return 'File Uploaded'


if __name__ == '__main__':
    app.run(debug = True)

我运行这个和 Web 服务器托管在 http://localhost:5000

因此，在我的 angular 组件 html 上，我放置了以下内容：

<form action="http://localhost:5000/uploader" method="POST" enctype = "multipart/form-data">
<input type="file" name="file" />
<input type="submit" />
</form>

然而，当我运行 angular 网页并通过上传文件并单击提交对其进行测试时，没有任何反应。没有报错，控制台也没有任何输出。我一定是遗漏了什么，有人能给我指出正确的方向吗？

Answer 1

表单提交处理程序

为了回答您的直接问题，发生的事情是 input type submit in Angular calls the onSubmit method of the form（而不是像普通 HTML 那样提交表单）。而且因为您的 class 中没有 onSubmit 的处理程序，所以什么也没有发生。

要进行快速测试，请按照 this link to create a simple onSubmit handler method 测试您的提交按钮是否有效。

这是一个 Stackblitz 示例，当您单击提交按钮时它会记录到控制台：https://stackblitz.com/edit/angular-uy481f

文件上传

要使文件上传正常，您需要做一些事情。这涉及组件 class，创建新服务并注入它，并更新您的表单以将其绑定到 class。

创建适当的 Angular 表单。 Here's an example.
Create a method 将处理表单的 onSubmit()。
创建 service that will handle Http calls to upload files.
Inject the service进入你的class，然后调用那个class的文件上传方法。

如您所见，与模板中的简单 post 表单不同，这项工作涉及很多内容。因此，一个答案就太多了。

但希望第一段回答了您的问题，其余答案为您指明了正确的方向。

实现文件从 Angular 上传到 Flask

Implementing File Uploads From Angular to Flask

python

forms

upload

flask

angular

表单提交处理程序

文件上传