javascript - Flask server cannot read file uploaded by POST request - Stack Overflow

admin管理员组

文章数量:1291106

I have my React client post a file with the fetch api to the '/dataset' endpoint.

import 'whatwg-fetch';

uploadData(csv) {
    this.dataset = csv;

    fetch('/dataset', {
        method: 'POST',
        body: this._fileToFormData(csv)
    }).then(
        (response) => {
            console.log(response);
        }
    ).catch( () => {} );
};

_fileToFormData(file) {
        var formData = new FormData();
        formData.append('file', file);
        return formData
    };

My Flask server is supposed to pick it up.

@app.route('/dataset', methods=['POST'])
def dataset():
    print request.get_data()
    csv_data = request.form['file']
    print csv_data
    return '{ "fake_json":100}', 200

However, the csv_data object is simply a unicode string, '[object File]'

The code

print "form:", request.form
print "files:", request.files

returns

ImmutableMultiDict([('file', u'[object File]')])
ImmutableMultiDict([])

How do I get the actual contents of the CSV file?

=== EDIT: Solved ===

the variable csv was actually a single file array, so I needed to extract the file out.

I have my React client post a file with the fetch api to the '/dataset' endpoint.

import 'whatwg-fetch';

uploadData(csv) {
    this.dataset = csv;

    fetch('/dataset', {
        method: 'POST',
        body: this._fileToFormData(csv)
    }).then(
        (response) => {
            console.log(response);
        }
    ).catch( () => {} );
};

_fileToFormData(file) {
        var formData = new FormData();
        formData.append('file', file);
        return formData
    };

My Flask server is supposed to pick it up.

@app.route('/dataset', methods=['POST'])
def dataset():
    print request.get_data()
    csv_data = request.form['file']
    print csv_data
    return '{ "fake_json":100}', 200

However, the csv_data object is simply a unicode string, '[object File]'

The code

print "form:", request.form
print "files:", request.files

returns

ImmutableMultiDict([('file', u'[object File]')])
ImmutableMultiDict([])

How do I get the actual contents of the CSV file?

=== EDIT: Solved ===

the variable csv was actually a single file array, so I needed to extract the file out.

• javascript
• python
• reactjs
• flask
• fetch-api

Share Improve this question Follow edited Jun 18, 2016 at 19:15 jldork asked Jun 18, 2016 at 18:20 jldorkjldork 8311 silver badge55 bronze badges 3

• have you tried file.read() rather than returning the file object from the form? i think it would look like, csv_data.read() ? – glls Commented Jun 18, 2016 at 18:27
• Yeah, I get an error saying that the unicode object doesn't have the method .read :/ – jldork Commented Jun 18, 2016 at 18:40
• Have you tried explicitly specifying the Content-Type to application/x-www-form-urlencoded or multipart/form-data ? – oxalorg Commented Jun 18, 2016 at 19:14

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Uploaded files are available in request.files, not request.form. The values are file-like objects, so to get the data you need to read the file.

data = request.files['file'].read()

See the Flask docs for some examples on working with uploads.

---

You also need to upload the file correctly. GitHub's fetch polyfill has an example using FormData to format the body properly. You must pass a single file or input to each call to append.

var input = document.querySelector('input[type="file"]')
var data = new FormData()
data.append('file', input.files[0])

fetch('/dataset', {
  method: 'POST',
  body: data
})

本文标签： javascriptFlask server cannot read file uploaded by POST requestStack Overflow