Vue.jsからFlaskに音声ファイルと文字列を同時にaxiosでpostしたいです。
音声ファイルはformDataを用いて、文字列はそのままpostする方法ならわかるのですが、同時にpostする方法がわかりません。

javascript
1upload_mp3: function(e) {
2      let self = this;
3      let formData = new FormData();
4      formData.append('mp3', this.uploadFile);
5      let config = {
6        headers: {
7          'content-type':  'multipart/form-data',
8        }
9      };
10      axios
11        .post('http://127.0.0.1:5000/mp3_upload', formData, config)
12        .then(function(response) {
13          console.log("mp3 data was sent");
14        })
15        .catch(error => {
16          console.log(error);
17          alert("error: mp3 data was NOT sent");
18        });
19    },

ここに文字列をくっつけて一緒にpostしたいのですが可能でしょうか。

##試した方法1
一緒にFormDataにappendする

javascript
1formData.append('mp3', this.uploadFile);
2formData.append('name', 'hogehoge');

この場合Flask側で上手く取り出せません。

Python
1# こちらはエラーが出ずに正常にファイルデータを取り出せる
2mp3_file = request.files['mp3']
3
4# こちらが原因でエラーが出る
5name = request.files['name']

エラーはconsole.logにのみ出て、Python側には出ません。

POST http://127.0.0.1:5000/mp3_upload 400 (BAD REQUEST)

また、request.filesの中身を以下のようにして覗こうとすると、

python
1print(request.files)

ImmutableMultiDict([('mp3', <FileStorage: 'npl_speech.mp3' ('audio/mp3')>)])

と出力されます('npl_speech.mp3'は音声ファイル名です)

##試した方法2
formDataを用いずに、連想配列の形でFlaskにpostしようとしましたが、Flask側から見るとファイルの中身が空になっていました。

javascript
1let formData = new FormData();
2      formData.append("mp3", this.uploadFile);
3      let data = {
4        'formdata': formData,
5        'name': 'hogehoge'
6      }

よろしくお願いします。

行動規範の内容に同意します

回答2件

自己解決

解決方法

一緒にFormDataにappendした上で

JavaScript
1formData.append('mp3', this.uploadFile);
2formData.append('name', 'hogehoge');

Flask側では以下のように受け取る

Python
1mp3_file = request.files['mp3']
2name = request.form['name']

参考文献

こちらを参考にさせていただきました。
【Javascript to flask】FormDataを送信/受信する方法【お家IT#6】

投稿2020/01/21 02:38

yuya_i1029

総合スコア7

ファイルと文字列を同じFormDataにappendすれば解決しません?

upload_mp3: function(e) {
      let self = this;
      let formData = new FormData();
      formData.append('mp3', this.uploadFile);
      formData.append("name", "何か");
      let config = {
        headers: {
          'content-type':  'multipart/form-data',
        }
      };
      axios
        .post('http://127.0.0.1:5000/mp3_upload', formData, config)
        .then(function(response) {
          console.log("mp3 data was sent");
        })
        .catch(error => {
          console.log(error);
          alert("error: mp3 data was NOT sent");
        });
    },

投稿2020/01/16 09:19

harinezumi.py

総合スコア282

yuya_i1029

2020/01/16 14:45

同じFormDataにappendすると、 Flask側で以下のように取り出すときにエラーが出ます。 ``` # こちらはエラーが出ずに正常にファイルデータを取り出せる mp3_file = request.files['mp3'] # こちらが原因でエラーが出る name = request.files['name'] ``` エラーはconsole.log側に表示されて以下の通りです。(Python側ではエラーは出ません) POST http://127.0.0.1:5000/mp3_upload 400 (BAD REQUEST) また、request.filesの中身を以下のようにして覗こうとすると、 ``` print(request.files) ``` ImmutableMultiDict([('mp3', <FileStorage: 'npl_speech.mp3' ('audio/mp3')>)]) と出力されます('npl_speech.mp3'は音声ファイル名です) 文字列は別の方法で取り出すべきならば教えていただきたいです。よろしくお願い致します。