一、问题说明
最近在使用Flutter Dio向Php后端上传图片和视频,发现都失败了。
于是,使用了Postman进行测试,发现Postman可以把图片和视频正常传到后端。
询问后端开发人员张三,张三一句我使用Postman测试是正常的,把我打发了。
这就郁闷了。😌
二、解决思路
不过机智的我,很块想到了排查问题的办法:
我通过抓包Dio传图片和视频的请求参数和Postman的请求参数,终于让我发现了问题点:
Dio图片和视频请求
Postman请求
Postman图片请求
Postman视频文件请求的Content-Type
"video/mp4"
三、解决方案
综上我们可以看到两者请求参数的不同。
Dio文件上传默认的Content-Type为application/ocet-stream。
Postman会根据文件格式的不同,设置其对应类型的Content-Type。
所以只需要代码里配置下上传的具体文件类型即可
图片Content-Type配置
import 'package:http_parser/http_parser.dart';
var contentType = MediaType.parse("image/png");
var formData = FormData.fromMap({ 'img': await MultipartFile.fromFile(imgPath, contentType: contentType) });
视频Content-Type配置
import 'package:http_parser/http_parser.dart';
var contentType = MediaType.parse("video/mp4");
var formData = FormData.fromMap({ 'video': await MultipartFile.fromFile(videoPath, contentType: contentType) });
四、环境说明
flutter 2.8.1
dio: 4.0.4
五、吐槽
作为卑微的前端仔只能被迫去适配后台(张三)的接口。
这种问题虽然算不上是后台(张三)的问题,但我心里还是默默吐槽了好几句。
六、未完待续
目前,因为项目进度只是写死了对应的文件类型,暂时不知传其他格式的视频或者图片会不会有问题。
后期,可能需要获取具体的文件媒体类型来配置对应的Content-Type,而不是目前项目中的硬编码方式。