如何在多部分请求中作为http主体参数(POST)传递图像文件

Question

我从我的图库中获取图像，现在想使用Multipart请求将此图像作为Http正文参数使用。我不知道我应该在Multipart请求中传递什么。

变量image包含方法调用后的图库图像。

final ImagePicker _picker = ImagePicker();
File? image;
var fileContent;
var fileContentBase64;

在我的App中显示图片

Padding(
padding: const EdgeInsets.all(18.0),
child: image == null? Text("No file chosen"): Image.file(
File(image!.path),
width: 150,
fit: BoxFit.cover,
),
),

从图库中获取图像的函数

void filePicker() async {
final File? selectedImage =
await ImagePicker.pickImage(source: ImageSource.gallery);
print(selectedImage!.path);
setState(() {
image = selectedImage;

fileContent = image!.readAsBytesSync();
fileContentBase64 = base64.encode(fileContent); 
});
}

现在在Api函数中我应该如何使用它?

Future<void> SaveCustomTestBooking() async {

var jsonResponse;
if (EncUserId.isNotEmpty) {
var postUri = Uri.parse("http://myAPIstomTestBooking");
var request  = http.MultipartRequest('POST',postUri);
request.fields['VisitDate'] = '_selectedDate';
request.fields['EncUserId'] = 'EncUserId';
request.files.add(new http.MultipartFile.fromBytes(
"UserFile", File(image!.path).readAsBytesSync(),
filename:"Image.jpg",
contentType: MediaType('image', 'jpg')));
request.send().then((response){
if (response.statusCode == 200) {
print("Uploaded!");
Navigator.push(context, MaterialPageRoute(builder: (context) => DieticianAfterDateSelectPage(rresponse:DieticianEncBookingIdModel.fromJson(jsonResponse),)));

} else {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("Somthing went wrong")));
throw Exception("Faild to fetch");
}
}

);}

}

Answer 1

下面是使用Multipart Request在Http正文参数中使用image的代码示例。

request.files.add(new http.MultipartFile.fromBytes(
"thumbnail", File(thumbnailImage.path).readAsBytesSync(),
filename:"Image.jpg",
contentType: MediaType('image', 'jpg')));

这里"thumbnail"是json关键字名称。用你自己的。由于