我想在Flutter网络应用程序中上传一张图片作为文件类型

Question

我正试图在flutter web应用程序中上传图像，但ImagePicker不适用于web应用程序，我正在使用另一个插件ImagePickerWeb，但它似乎也不起作用。

File image;
// image = await ImagePickerWeb.getImage(outputType: ImageType.file);
Image i = await ImagePickerWeb.getImage(outputType: ImageType.widget);
print("imageeeeee");
// print(i.toString());
if(i!=null){
File temp = await ImageUtils.imageToFile(imageName: i.toString(),ext: "jpg");
// print(image.path);
// image = (await FlutterWebImagePicker.getImage) as File;
// print("printing image from gallery $image");
image = temp;

// final picker = ImagePicker();
// final pickedFile = await picker.getImage(source: ImageSource.gallery);
// print('PickedFile: ${pickedFile.toString()}');
if(image!=null){
setState(() {
// image = File(pickedFile.path);
model.image = image;
_image = image;
final bytes = image.readAsBytesSync();
String _img64 = base64Encode(bytes);
imageModel.value = "data:image/png;base64," + _img64;
});
}}
print("printing image");

Answer 1

我用image_picker_web: ^1.0.9写了一个例子

给。

import 'package:flutter/material.dart';
import 'package:image_picker_web/image_picker_web.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Home());
}
}
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
MediaInfo mediaInfo;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnimatedContainer(
height: mediaInfo == null ? 50 : 200,
width: double.maxFinite,
duration: Duration(milliseconds: 200),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(4)),
child: Builder(
builder: (context) {
if (mediaInfo == null) {
return Center(
child: Text("Select An Image"),
);
}
return ClipRRect(
child: Image.memory(
mediaInfo.data,
semanticLabel: mediaInfo.fileName,
fit: BoxFit.contain,
),
borderRadius: BorderRadius.circular(4),
);
},
),
),
SizedBox(height: 20),
RaisedButton(
onPressed: () {
pickImage().then((value) {
setState(() {
mediaInfo = value;
});
});
},
child: Text("Select Image"),
),
],
),
);
}
Future<MediaInfo> pickImage() async {
MediaInfo mediaInfo = await ImagePickerWeb.getImageInfo;
return mediaInfo;
}
}

输出