Flutter将单个图像上传转换为多个图像上传

Question

我是新来的，我正在尽我所能解释这里的规定。我一次上传一张图片，但我正在寻找一种方法，将其转换为一次上传多张图片。下面是我上传的单个图像的样子：

class UploadImageDemo extends StatefulWidget {
UploadImageDemo() : super();
final String title = "Upload Image Demo";
@override
UploadImageDemoState createState() => UploadImageDemoState();
}
class UploadImageDemoState extends State<UploadImageDemo> {
//
static final String uploadEndPoint =
'http://localhost/flutter_test/upload_image.php';
Future<File> file;
String status = '';
String base64Image;
File tmpFile;
String errMessage = 'Error Uploading Image';
chooseImage() {
setState(() {
file = ImagePicker.pickImage(source: ImageSource.gallery);
});
setStatus('');
}
setStatus(String message) {
setState(() {
status = message;
});
}
startUpload() {
setStatus('Uploading Image...');
if (null == tmpFile) {
setStatus(errMessage);
return;
}
String fileName = tmpFile.path.split('/').last;
upload(fileName);
}
upload(String fileName) {
http.post(uploadEndPoint, body: {
"image": base64Image,
"name": fileName,
}).then((result) {
setStatus(result.statusCode == 200 ? result.body : errMessage);
}).catchError((error) {
setStatus(error);
});
}
Widget showImage() {
return FutureBuilder<File>(
future: file,
builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
if (snapshot.connectionState == ConnectionState.done &&
null != snapshot.data) {
tmpFile = snapshot.data;
base64Image = base64Encode(snapshot.data.readAsBytesSync());
return Flexible(
child: Image.file(
snapshot.data,
fit: BoxFit.fill,
),
);
} else if (null != snapshot.error) {
return const Text(
'Error Picking Image',
textAlign: TextAlign.center,
);
} else {
return const Text(
'No Image Selected',
textAlign: TextAlign.center,
);
}
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Upload Image Demo"),
),
body: Container(
padding: EdgeInsets.all(30.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
OutlineButton(
onPressed: chooseImage,
child: Text('Choose Image'),
),
SizedBox(
height: 20.0,
),
showImage(),
SizedBox(
height: 20.0,
),
OutlineButton(
onPressed: startUpload,
child: Text('Upload Image'),
),
SizedBox(
height: 20.0,
),
Text(
status,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.green,
fontWeight: FontWeight.w500,
fontSize: 20.0,
),
),
SizedBox(
height: 20.0,
),
],
),
),
);
}
}

基于以上所述，一切都非常适合单次上传，点击chooseImage，我可以拾取图像，showImage显示它，startUpload将它上传到服务器端，但我希望它一次拾取多个图像。

Answer 1

您可以使用pickMultiImage((而不是pickImage((从galery中拾取多个图像。

final List<XFile>? images = await _picker.pickMultiImage();

由于您的后端接受图像作为base64字符串，因此您必须运行图像列表，将每个图像转换为base64字符串并通过Post Request提交。

最好通过多部分发送图像。但当然，你必须相应地调整你的后端

如何在Flutter中上传图像和文件到服务器？