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

Question

Angular 4 flask 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 header 设置为 null，因此它为空。现在 Angular 无法告诉服务器如何拆分 multipart/form 请求的不同部分。

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

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

您的 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: 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'] 和 request.files['fileData'] 来访问这两个字段。

另见 Uploading Files pattern documentation .

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