flutter-web - 上传到颤振网络时图像已损坏
问题描述
我一直在尝试在 Flutter Web 应用程序中上传图像。上传图像时收到 200 响应代码,但问题是我上传的图像已损坏。我搜索了与我类似的帖子,但我无法解决问题。我尝试使用 http.Multipart 和 dio 包,但两者都给了我相同的结果。基本上我要做的是使用(尝试使用 FilePicer.platform.pickfiles 和 ImagePickerWeb.getImageInfo)从计算机磁盘中选择图像并将其上传到服务器。
我真的真的需要帮助,我需要答案
为什么没人回答这个??
这是使用 ImagePickerWeb 的图像选择器方法
pickProfileImageWeb() async {
MediaInfo mediaInfo = await ImagePickerWeb.getImageInfo;
if (mediaInfo != null) {
setState(() {
imagevalue = mediaInfo.data!;
});
}
print("mediaInfo is ${mediaInfo.fileName}");
uploadImageWeb(mediaInfo.data!, mediaInfo.fileName!);
imageUploadWithHttp(mediaInfo.data!);
}
使用 FilePicker.platform.pickFiles
pickProfileImageWeb() async {
FilePickerResult? imagePicked = await FilePicker.platform.pickFiles();
if (imagePicked != null) {
Uint8List? fileBytes = imagePicked.files.first.bytes;
String fileName = imagePicked.files.first.name;
setState(() {
imagevalue = fileBytes!;
});
print("Image name is $fileName");
uploadImageWeb(fileBytes!, fileName);
imageUploadWithHttp(fileBytes, fileName);
}
这是我同时使用 dio 和 http.Multipart 的上传器
uploadImageWeb(Uint8List fileBytes, String? fileName) async {
var dioo = Dio();
try {
final Map<String, String> header = {
// "file-name": fileName!,
"Access-Control-Allow-Origin": "*",
"Authorization": "Bearer",
};
dio.FormData formData = dio.FormData.fromMap(
{
"image": dio.MultipartFile.fromBytes(fileBytes),
"content-type": lookupMimeType(fileBytes.toString())
},
);
String? sUrl = await _profileController.getSignedUrl("profile");
print("Singed url is $sUrl");
if (sUrl != null) {
var response = await dioo.put(
Uri.parse(sUrl).toString(),
data: formData,
);
_profileController.isPicUploading(true);
if (response.statusCode == 200) {
print("The response is ${response.statusCode}");
} else {
print("Error when uploading files ${response.statusCode}");
_profileController.isPicUploading(false);
}
} else {
print("Signed Url is null $sUrl");
}
} on Exception catch (e) {
print("Error is $e");
}
}
使用 http.Multipart
imageUploadWithHttp(Uint8List? filepath, String? fileName) async {
try {
String? sUrl;
sUrl = await _profileController.getSignedUrl("profile").then(
(signedUrl) async {
print("singedUrl is $signedUrl");
final Map<String, String> header = {
"file-name": fileName!,
"Access-Control-Allow-Origin": "*"
};
print("Sined url is $signedUrl");
if (signedUrl != null) {
var request = http.MultipartRequest(
"PUT",
Uri.parse(signedUrl),
);
request.headers.addAll(header);
request.files.add(
http.MultipartFile.fromBytes(
"file",
List.from(filepath!),
contentType: MediaType("application", 'octet-stream'),
),
);
_profileController.isPicUploading(true);
request.send().then((response) {
if (response == 200) {
print("Uploaded!");
} else {
print("Error when uploading files ${response.statusCode}");
}
_profileController.isPicUploading(false);
});
}
},
);
} on Exception catch (e) {
print("error is $e");
_profileController.isPicUploading(false);
}
}
}
解决方案
当您不为多部分请求提供文件名时,就会发生这种情况。尝试为您的多部分请求提供正确的文件名。例如:
newFormData.files.add(MapEntry(
mapFile.key,
apiDio.MultipartFile.fromBytes(
_selectedFile,
filename: 'file_up.jpg',
contentType: new MediaType('image', 'jpg'),
)));
推荐阅读
- r - 无法使用 effect_plot() 在 R 中绘制线性回归:在 R 中未找到“数据”的值,而
- r - R data.table 的合并指示器?
- amazon-dynamodb - 在 AWS DynamoDB 中使用二级索引时,LastEvaluatedKey 包含什么?
- shopify - Shopify 中的简码在使用渲染而不是包含时不再起作用
- html - Google 信息窗口如何添加自定义 Html 链接/图像
- ios - 如何在 Cloud Function 中为 android 和 iOS 创建 FCM 有效负载
- firebase - Firestore安全规则的真实性
- ruby-on-rails - 带有carrierwave的Cloudinary在Rails中不起作用
- python - sklearn 的 imputer 减少列?
- c# - 我可以在 ASP.NET Core 中为 SQL Server 分布式缓存使用内存引擎吗?