質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Q&A

1回答

1356閲覧

FlutterからLaravelAPIへ画像データを送信する方法がわからない

Y.Mamoru

総合スコア47

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

0グッド

0クリップ

投稿2022/11/07 08:32

編集2022/11/07 20:59

前提

Flutterアプリを作成しています。
Flutterで作成した画面からLaravelAPIへデータを飛ばすのですが、画像データを送信する方法がわかりません。

実現したいこと

Flutter画面で選択した画面をLaravelAPIへ送信したい。

発生している問題・エラーメッセージ

以下のサイトを参考しているのですが、
★マークの部分でエラーが出て、解消できません。
https://qiita.com/shuuun/items/20cadde4ec92f3fd1df4

エラーは「どれも isn't defined」になります。

dart

1 startWebFilePicker(int imageNum) async { 2 //画像データのパスを取得することができる 3 var image = await ImagePicker().pickImage(source: ImageSource.gallery); 4 if(imageNum == 0){ 5 setState(() { 6 _image0 = File(image!.path); 7 }); 8 final dio = Dio(); //★Dioが未定義。どこで定義すればわかりません。 9 final formData = FormData.fromMap({//★fromMapがFormDataにおいて未定義 10 'file': await MultipartFile.fromFile(//★fromFileがMultipartFileにおいて未定義 11 image!.path, 12 filename: image!.path.split('/').last, 13 ), 14 }); 15 print("passed0"); 16 } 17 if(imageNum == 1){ 18 setState(() { 19 _image1 = File(image!.path); 20 }); 21 print("passed1"); 22 } 23 if(imageNum == 2){ 24 setState(() { 25 _image2 = File(image!.path); 26 }); 27 print("passed2"); 28 } 29}

該当のソースコード

dart

1import 'dart:io'; 2import 'package:get/get_connect/http/src/multipart/form_data.dart'; 3import 'package:get/get_connect/http/src/multipart/multipart_file.dart'; 4import 'package:image_picker/image_picker.dart'; 5import 'package:http_parser/http_parser.dart'; 6import 'package:http/http.dart' as http; 7import 'package:delivery_management/Common.dart'; 8import 'package:flutter/material.dart'; 9import 'dart:html' as html; 10import 'dart:typed_data'; 11import 'dart:convert'; 12 13import 'package:delivery_management/Util/ApiConnect.dart'; 14import '../Communication/RequestData.dart'; 15 16// 写真選択ページ 17class ImageSelectPage extends StatefulWidget { 18 const ImageSelectPage({ Key? key, required this.requestData}) : super(key: key); 19 // 前画面で入力された案件データ 20 final RequestData requestData; 21 22 23 _ImageSelectPageState createState() => _ImageSelectPageState(); 24} 25 26class _ImageSelectPageState extends State<ImageSelectPage> { 27 // 変換したファイルを保持 28 Uint8List? _bytesData0; 29 Uint8List? _bytesData1; 30 Uint8List? _bytesData2; 31 // 送信する関数に渡す為の変数 32 List<int>? _selectedFile0; 33 List<int>? _selectedFile1; 34 List<int>? _selectedFile2; 35 // 選択or撮影した画像 36 File? _image0; 37 File? _image1; 38 File? _image2; 39 40 startWebFilePicker(int imageNum) async { 41 //画像データのパスを取得することができる 42 var image = await ImagePicker().pickImage(source: ImageSource.gallery); 43 if(imageNum == 0){ 44 setState(() { 45 _image0 = File(image!.path); 46 }); 47 final dio = Dio(); 48 final formData = FormData.fromMap({ 49 'file': await MultipartFile.fromFile( 50 image!.path, 51 filename: image!.path.split('/').last, 52 ), 53 }); 54 print("passed0"); 55 } 56 if(imageNum == 1){ 57 setState(() { 58 _image1 = File(image!.path); 59 }); 60 print("passed1"); 61 } 62 if(imageNum == 2){ 63 setState(() { 64 _image2 = File(image!.path); 65 }); 66 print("passed2"); 67 } 68 } 69 70 71 void initState() { 72 super.initState(); 73 // try { 74 // isSmartPhone = (Platform.isAndroid || Platform.isIOS); 75 // } 76 // catch (e) { 77 // isSmartPhone = false; 78 // } 79 } 80 81 82 Widget build(BuildContext context) { 83 return Scaffold( 84 appBar: AppBar( 85 title: const Text("写真選択 希望金額"), 86 ), 87 body: Column( 88 children: <Widget>[ 89 Expanded( 90 child: Column( 91 mainAxisAlignment: MainAxisAlignment.spaceAround, 92 children: [ 93 Row( 94 mainAxisAlignment: MainAxisAlignment.spaceEvenly, 95 children: <Widget>[ 96 OutlinedButton( 97 onPressed: () => startWebFilePicker(0), 98 child: _image0 == null ? 99 const Icon(Icons.add_photo_alternate) : 100 // Image.memory(_bytesData0!, width: 150, height: 150) 101 Text('選択済み') 102 ), 103 ], 104 ), 105 //省略 106 ], 107 ) 108 ), 109 Padding( 110 padding: const EdgeInsets.all(10), 111 child: MaterialButton( 112 padding: const EdgeInsets.all(20), 113 color: Colors.red, 114 onPressed: () => onPressedConfirmButton(widget.requestData), 115 child: const Text("確定"), 116 textColor: Colors.white, 117 ) 118 ) 119 ] 120 ) 121 ); 122 } 123 124 // 確定ボタン押したとき 125 onPressedConfirmButton(RequestData requestData) async { 126 if (!formKey.currentState!.validate()) { 127 return; 128 } 129 130  //省略 131 132 //画像データを格納する配列 133 // List<File?> imgInfo = [_image0,_image1,_image2]; 134 List<List<int>?> imgInfo = [_selectedFile0,_selectedFile1,_selectedFile2]; 135 136 // データ送信 137 final res = await Network().postData(data, '/cases',context); 138 139 //省略 140 141 Navigator.popUntil(context, (route) => route.isFirst); 142 } 143}

試したこと

画像をUint8Listで取得する方法や、ImagePickerを使用してパスを取得する方法など
様々なサイトを見て試しているのですが、
実際の送信部分がわかりません。

知識不足ゆえにわかりにくい質問になっているかと思いますが、宜しくお願い致します。

補足情報(FW/ツールのバージョンなど)

開発ツール:AndroidStudio4.01
DartSDKバージョン:2.17.6
Flutterバージョン:3.05

追加情報

追加情報ですが、
Laravel側へはデータをJsonに変換して送っています。
そして画像データをFile型の配列で受け取っているので、File型で送れるようになることを想定しています。
(画像ファイルのバイトデータを取得していたので、Image.memoryを使用して画面表示させるために使っています)

しかし現状、File型で送信すると、「Jsonに変換できない」という内容のエラーが出てきてしまう状態です。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

Dioはパッケージですね。
Dioを使うならいつも通りpubspec.yamlに追加して、インポート文を書く必要があります。

あとエラーメッセージは基本的に英文で検索した方が効率が良いので、英文のエラーメッセージも載せた方がみんなの役に立つと思います、

投稿2022/11/07 09:33

moriman

総合スコア615

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Y.Mamoru

2022/11/07 09:53

回答ありがとうございます! Dioに関してはご指摘いただいた通り、インポートを追加することで解消できました。 ありがとうございます! 他2か所のエラーですが、 何故かエラーが発言する場所が、それぞれ少し前にずれまして、 FormDataとMultipartFileで発生し始めました。 FormDataでは、以下のエラーが出ています。 「The name 'FormData' is defined in the libraries 'package:dio/src/form_data.dart (via package:dio/dio.dart)' and 'package:get/get_connect/http/src/multipart/form_data.dart'.」 MultipartFileでは以下のエラーが出ています。 「The name 'MultipartFile' is defined in the libraries 'package:dio/src/multipart_file.dart (via package:dio/dio.dart)' and 'package:get/get_connect/http/src/multipart/multipart_file.dart'.」 べた書きですみません。宜しくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問