当我使用图像选择器从Galery中选择图像时，将使用Flutter和laravel Rest API发送图像上传

Question

当我使用图像拾取器从图库中选择图像时，我想在使用REST API发送的图像时上传。我正在寻找如何做的，但我仍然不明白，我尝试了不同的方法，但总是会出现错误。因此，如果有人知道将图像作为多部分数据发送到API的最佳方法。我的目标是连接颤音是前端，而拉拉维尔（Laravel）是后端。 在此先感谢

：

import 'dart:async';
import 'dart:convert';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

import 'package:image_picker/image_picker.dart';
import 'package:myapp/utils/api.dart';
import 'package:path/path.dart';
import 'package:flutter/foundation.dart' show kIsWeb;



class AddProduct extends StatefulWidget {
const AddProduct({Key? key}) : super(key: key);

@override
State<AddProduct> createState() => _AddProductState();
}

class _AddProductState extends State<AddProduct> {
bool _isLoading = false;
File? _image;

final _picker = ImagePicker();
// Implementing the image picker
Future<void> _openImagePicker() async {
final XFile? pickedImage =
    await _picker.pickImage(source: ImageSource.gallery);
if (pickedImage != null) {
  setState(() {
    _image = File(pickedImage.path);
  });
}
}

@override
Widget build(BuildContext context) {

return Scaffold(
  body: Container(
    child: _isLoading ? const Center(child: CircularProgressIndicator()) : ListView(
      children: <Widget>[
        textSection(),
        imageProduct(),
        buttonSection(context) 

      ],
    ),
  ),
  appBar: AppBar(
      title: const Text('Add Product')
  ),      
);

}

Container buttonSection(BuildContext context) {
return Container(
  width: MediaQuery.of(context).size.width,
  height: 40.0,
  padding: const EdgeInsets.symmetric(horizontal: 15.0),
  margin: const EdgeInsets.only(top: 15.0),
  child: ElevatedButton(
    onPressed: () {
      setState(() {
        _isLoading = true;
      });          
      addProducts(context, File(_image!.path));
    },
    child: const Text("Create", style: TextStyle(color: Colors.white)),
  ),
);
}

final TextEditingController _productName = TextEditingController();
final TextEditingController _description = TextEditingController();
final TextEditingController _price = TextEditingController();

Container textSection() {
return Container(
  padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 20.0),
  child: Column(
    children: <Widget>[
      TextFormField(
        controller: _productName,
        cursorColor: Colors.black,

        style: const TextStyle(color: Colors.black),
        decoration: const InputDecoration(
          hintText: "Product name",
          border: OutlineInputBorder(),
          hintStyle: TextStyle(color: Colors.black54),
        ),
      ),
      TextFormField(
        controller: _description,
        cursorColor: Colors.black,
        maxLines: 10,

        style: const TextStyle(color: Colors.black),
        decoration: const InputDecoration(
          hintText: "Description",
          border: OutlineInputBorder(),
          hintStyle: TextStyle(color: Colors.black54),
        ),
      ),
      TextFormField(
        controller: _price,
        cursorColor: Colors.black,

        style: const TextStyle(color: Colors.black),
        decoration: const InputDecoration(
          hintText: "Price",
          border: OutlineInputBorder(),
          hintStyle: TextStyle(color: Colors.black54),
        ),
      ), 
    ] 
  ),      
);
}

Widget imageProduct() {
return Center(
  child: Stack(children: <Widget>[
    SizedBox(
      width: 100,
      height: 100,
      child: _image != null ? (kIsWeb)
                ? Image.network(_image!.path,  fit: BoxFit.cover)
                : Image.file(_image!, fit: BoxFit.cover) : const Text('Please select an image'),
    ),        
    Positioned(
      bottom: 20.0,
      right: 20.0,
      child: InkWell(
        onTap: () {
          _openImagePicker();              
        },
        child: const Icon(
          Icons.camera_alt,
          color: Colors.teal,
          size: 28.0,
        ),
      ),
    ),
  ]),
);
}

Future addProducts(BuildContext context, File imageFile) async {

var token = 'abc';
 var request = http.MultipartRequest(
   'POST',
   Uri.parse(Api.baseUrl + 'product/new'),
);

Map<String, String> headers = {
  "Accept": "application/json",
  "Authorization": "Bearer " + token
};   
 request.files.add(await http.MultipartFile.fromPath('image', imageFile.path));
 request.headers.addAll(headers); 
 request.fields['product_name'] = _productName.text;
 request.fields['description'] = _description.text;
 request.fields['price'] = _price.text;
 
 var response = await request.send();
} 

}

Answer 1

我将图像转换为base64，在JSON中将base64发送到API。
在API中，A将base64转换为图像。

在颤音中：

Future<String?> convertImgToBase64() async {
    try {
      File img = File(_imageFile!.path);
      final splitted = _imageFile!.path.split('.');
      final ext = splitted.last;
      final response = await img.readAsBytes();
      return "data:image/$ext;base64,${base64Encode(response)}";
    } catch (e) {
      //print(e.toString());
      return null;
    }
  }

在拉拉维尔：

public function convertImage(Request $request, $id) {
        if($request->has('avatar')) {
            $data = $request->avatar;
            if (preg_match('/^data:image\/(\w+);base64,/', $data, $type)) {
                $data = substr($data, strpos($data, ',') + 1);
                $type = strtolower($type[1]);
                $name = "avatar_{$id}.{$type}" ;
                if (!in_array($type, [ 'jpg', 'jpeg', 'png' ])) {
                    throw new \Exception('Invalid image type');
                }
                $data = str_replace( ' ', '+', $data );
                $data = base64_decode($data);
                if ($data === false) {
                    throw new \Exception('Base64_decode failed');
                }
            } else {
                throw new \Exception('Did not match data URI with image data');
            }
            Storage::disk('local')->put("gallery/avatars/{$name}", $data);
            return $name;
            /*/if (file_put_contents($destination_path.$name, $data) != false) {
                return $name;
            } else {
                throw new \Exception('Unable to save image');
            }*/

        }
    }
}