Flutter Web集成Imgur API上传图片时遇Dio连接错误求助

问题分析 #

你遇到的 DioException [connection error] 本质是浏览器**同源策略（CORS）**限制导致的XMLHttpRequest请求被拦截——Postman作为桌面工具不受浏览器同源策略约束，因此能正常请求，而Flutter Web运行在浏览器环境中会触发该限制。另外，使用base64编码上传的方式可能也会增加请求复杂度，间接引发拦截。

解决方案 #

1. 改用Multipart直接上传文件（推荐） #

放弃base64编码，直接以multipart/form-data格式上传文件，这是浏览器环境下更标准的文件上传方式，也能避免CORS相关的潜在问题：

final ImagePicker picker = ImagePicker();

// 选择图片
final XFile? image = await picker.pickImage(source: ImageSource.gallery);
if (image == null) {
  print("No image selected.");
  return;
}

// 构造Multipart文件对象
MultipartFile file = await MultipartFile.fromFile(
  image.path,
  filename: image.name,
);

// 请求配置
const clientId = "你的Client-ID";
var headers = {'Authorization': 'Client-ID $clientId'};
FormData data = FormData.fromMap({
  'image': file,
  'title': 'Simple upload',
  'description': 'This is a simple image upload in Imgur'
});

// 发起请求
var dio = Dio();
try {
  var response = await dio.post(
    'https://api.imgur.com/3/image',
    options: Options(headers: headers),
    data: data,
  );
  print("上传成功：${response.data}");
} catch (e) {
  print("上传失败：$e");
}

2. 用http库尝试Multipart请求 #

如果Dio仍然报错，可以切换到官方http库的Multipart请求方式，排查是否是Dio的Web适配问题：

import 'package:http/http.dart' as http;

final ImagePicker picker = ImagePicker();
final XFile? image = await picker.pickImage(source: ImageSource.gallery);
if (image == null) {
  print("No image selected.");
  return;
}

const clientId = "你的Client-ID";
var request = http.MultipartRequest(
  'POST', 
  Uri.parse('https://api.imgur.com/3/image')
);
request.headers['Authorization'] = 'Client-ID $clientId';
// 添加文件
request.files.add(await http.MultipartFile.fromPath('image', image.path));
// 添加额外字段
request.fields['title'] = 'Simple upload';
request.fields['description'] = 'This is a simple image upload in Imgur';

// 发送请求
var response = await request.send();
if (response.statusCode == 200) {
  print("上传成功：${await response.stream.bytesToString()}");
} else {
  print("上传失败，状态码：${response.statusCode}");
}

3. 额外检查项 #

• 确认你的Imgur Client-ID 有效且未超过调用次数限制（可在Imgur开发者后台查看）
• 打开浏览器开发者工具（F12）的Network面板，查看请求的具体错误信息（如CORS相关的报错提示），进一步定位问题
• 确保image_picker和dio/http依赖已正确添加到pubspec.yaml并执行flutter pub get

内容的提问来源于stack exchange，提问作者Aayan Agarwal