Flask文件上载无法获取表单d

Question

角度4 烧瓶1.0.2

大家好

我试图从Angular上传一个文件，方法是填充一个新的FormData（）对象并发布它。它看起来很正常，但是我不能从Flask内的post中得到值。在

我从一个按钮点击事件中调用它：

UploadFile() : void{
    let formModel = new FormData()
    formModel.set('fileName', this.fileName);
    formModel.set('fileData', this.form.get('fileData').value);

    this.filesProvider.UploadFile(formModel)
      .subscribe(res => {
      this.UploadFileProcessed(res, true);
    }
    , (err) => {
      this.UploadFileProcessed(err, false);
    }
);

…它调用提供者。。。在

^{pr2}$

在烧瓶API端，我有这个：

@app.route('/api/member/uploadFile', methods=['POST'])
@auth.login_required
def uploadFile(): 
    print request.form.get('key1')
    return "ok"

在Flask dev服务器终端上运行这个输出“None”。在

如果我做了print request.get_data()我会看到所有的post数据（包括疯狂的图像数据）。在

在Chrome中，请求如下所示：

你知道我做错了什么吗？我是怎么从烧瓶里得到数据的？在

谢谢！在

Answer 1

你做错了两件事：

• 您将Content-Type头设置为null，因此它是空的。现在Angular无法告诉服务器如何分割multipart/form请求的不同部分。

• 您没有访问服务器端的正确字段。

您应该根本不设置Content-Type头，因此删除headers.set('Content-Type', null)调用。Angular4然后sets the header for you，到multipart/form-data，并将在该报头中包含边界值（请求正文中的字符串betwen字段）。在

您的烧瓶代码试图访问一个不存在的字段。您的前端代码发布两个字段：

formModel.set('fileName', this.fileName);
formModel.set('fileData', this.form.get('fileData').value);

你的截图证实了fileName和{}部分确实已经发布。但是您的Flask代码试图访问key1：

^{pr2}$

没有这样的键，因此.get()方法返回默认值None。在

对于文件上载，您确实希望使用^{} attribute；请参阅有关该属性和^{} attribute的文档：

form: A MultiDict with the parsed form data from POST or PUT requests. Please keep in mind that file uploads will not end up here, but instead in the files attribute.

[...]

files: A MultiDict with files uploaded as part of a POST or PUT request. Each file is stored as FileStorage object. It basically behaves like a standard file object you know from Python, with the difference that it also has a save() function that can store the file on the filesystem.

所以使用request.form['fileName']和{}来访问这两个字段。在

另请参见Uploading Files pattern documentation。在

另请注意：您不应该设置Accept头。Accept报头是为了让客户机（例如您的浏览器）告诉服务器什么样的响应是可以接受的。Accept: multipart/form告诉服务器您希望它用multipart/form响应来响应。它没有提到请求本身的内容。如果您的示例是从注释this blog post (a top Google hit for "angular 4 form-data upload")得到的，那么该注释器用非工作代码误导了您。我在那里添加了一条评论，至少可以帮助未来的访问者避免这种错误。在