flutter 使用dio上传图片
时间: 2025-05-20 13:35:55 浏览: 18
### 如何在 Flutter 中使用 Dio 库上传图片
要在 Flutter 中通过 Dio 库实现图片上传功能,可以按照以下方式操作。以下是详细的说明以及代码示例。
#### 导入必要的库并初始化 Dio 实例
为了使用 Dio 进行 HTTP 请求,首先需要导入 `dio` 的包,并创建一个 Dio 对象实例以便后续调用[^1]:
```dart
import 'package:dio/dio.dart';
Dio dio = Dio();
```
#### 创建文件对象用于上传
当准备上传本地存储中的文件时,可以通过 Dart 提供的 `File` 类来加载目标文件路径下的数据。假设我们已经获取到了外部存储目录,则可通过该路径构建所需的文件对象[^2]:
```dart
Directory directory = await getExternalStorageDirectory();
String filePath = '${directory.path}/example_image.jpg';
File fileToUpload = File(filePath);
```
#### 构建表单数据结构
对于复杂的 POST 请求来说,通常会采用键值对的形式提交参数给服务器端处理。这里需要用到的是 `FormData`, 它允许我们将普通的字符串字段与二进制大对象(如图像)一起发送出去:
```dart
FormData formData = FormData.fromMap({
"name": "example_name",
"file": UploadFileInfo(fileToUpload, "example_image.jpg"),
});
```
注意这里的第二个参数 `"example_image.jpg"` 是指明了服务端接收到此文件后的名称[^2].
#### 发起网络请求完成实际传输过程
最后一步就是利用前面定义好的变量去执行真正的POST方法并向指定URL地址传递所需的数据。同时还可以监听整个过程中已传送字节数量的变化情况从而显示进度条等功能[^2]:
```dart
Response response;
try {
response = await dio.post(
"https://your-server-url/upload_endpoint",
data: formData,
options: Options(method:'POST'),
onSendProgress: (int sent, int total){
print('Progress: ${(sent / total * 100).toStringAsFixed(0)}%');
}
);
} catch(e){
rethrow;
}
print(response.data.toString());
```
以上即为完整的基于 flutter framework 下借助 dio plugin 来达成图片资料上载至远程web service的例子[^2]^.
### 注意事项
- 确保设备拥有访问互联网权限,在 AndroidManifest.xml 文件里添加 `<uses-permission android:name="android.permission.INTERNET"/>`.
- 需要读写手机内部储存空间的话也要记得申请相应的许可.
阅读全文
相关推荐


















