python - 实现从 Angular 到 Flask 的文件上传

Question

我正在尝试为我的网络工具实现文件上传。前端使用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

表单 onSubmit 处理程序

为了回答您眼前的问题，发生的是 Angular 中的输入类型提交 calls the onSubmit method of the form (而不是像纯 HTML 那样提交表单)。而且因为您的类中没有 onSubmit 的处理程序，所以什么也没有发生。

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

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

文件上传

要使文件上传工作，您需要做一些事情。这涉及到组件类，创建一个新服务并注入(inject)它，并更新您的表单以将其绑定(bind)到该类。

1. 创建适当的 Angular 表单。 Here's an example .
2. Create a method它将处理表单的 onSubmit()。
3. 创建 service that will handle Http calls to upload files .
4. Inject the service进入你的类，并调用该类的文件上传方法。

正如您所看到的，与模板中的简单帖子表单不同，完成这项工作涉及很多工作。因此，单一答案就太多了。

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