前提
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に変換できない」という内容のエラーが出てきてしまう状態です。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/11/07 09:53
2022/11/07 11:59