Flask文件上传无法获取表单数据

Question

角度 4 烧瓶 1.0.2

大家好

我正在尝试通过填充新的 FormData() 对象并发布它来从 Angular 上传文件。它似乎可以发布，但我无法从 Flask 中获取帖子中的值。

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

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);
    }
);

...调用提供者...

UploadFile(formData: FormData) : Observable<Response> {

    let headers = new Headers();
    headers.set('Content-Type', null);
    headers.set('Accept', "multipart/form-data");
    headers.set('Authorization', 'Basic ' + btoa(access_token + ":"));
    let requestOptions = new RequestOptions({ headers: headers })

    return this.http
    .post(this.globalVarsProvider.apiUrl + "member/uploadFile", formData, requestOptions)
    .map((response: Response) => response);
}

在 Flask API 端我有这个：

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

在 Flask 开发服务器终端中运行此输出“None”。

如果我这样做print request.get_data()，我会看到所有帖子数据（包括疯狂的图像数据）。

在 Chrome 中，请求如下所示：

知道我做错了什么以及如何从 Flask 中获取数据吗？

谢谢！

Answer 1

你做错了两件事：

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

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

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

您的 Flask 代码正在尝试访问不存在的字段。您的前端代码发布了两个字段：

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

并且您的屏幕截图确认fileName 和fileData 部件确实已发布。但是您的 Flask 代码尝试访问 key1:

print request.form.get('key1')

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

对于文件上传，你真的很想使用request.files attribute；请参阅该属性和 requests.form attribute 的文档：

form：MultiDict 包含来自 POST 或 PUT 请求的已解析表单数据。请记住，文件上传不会在此处结束，而是在 files 属性中结束。

[...]

files：作为POST 或PUT 请求的一部分上传的文件的MultiDict。每个文件都存储为FileStorage 对象。它的行为基本上类似于你从 Python 中知道的标准文件对象，不同之处在于它还有一个 save() 函数，可以将文件存储在文件系统上。

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

另见Uploading Files pattern documentation。

附带说明：您不应设置 Accept 标头。 Accept 标头用于客户端（例如您的浏览器）告诉服务器什么样的响应是可以接受的。 Accept: multipart/form 告诉服务器您希望它以 multipart/form 响应进行响应。它没有说明请求本身的内容。如果您的示例来自对 this blog post (a top Google hit for "angular 4 form-data upload") 的评论，那么该评论者使用无效代码误导了您。我在那里添加了一条评论，至少可以帮助未来的访问者避免该错误。