用flutter实现一个图片上传的事例
以下是一个简单的Flutter图片上传示例:
- 首先,需要在pubspec.yaml文件中添加
image_picker和http依赖:
dependencies:
flutter:
sdk: flutter
http: ^0.12.2
image_picker: ^0.8.4+3
- 创建一个上传图片的页面,包括一个用于选择图片的按钮和一个用于上传图片的按钮:
import 'dart:convert';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:http/http.dart' as http;
class ImageUploadPage extends StatefulWidget {
@override
_ImageUploadPageState createState() => _ImageUploadPageState();
}
class _ImageUploadPageState extends State<ImageUploadPage> {
File _image;
final picker = ImagePicker();
Future getImage() async {
final pickedFile = await picker.getImage(source: ImageSource.gallery);
setState(() {
_image = File(pickedFile.path);
});
}
Future uploadImage() async {
String base64Image = base64Encode(_image.readAsBytesSync());
String fileName = _image.path.split("/").last;
var response = await http.post(
Uri.parse("https://example.com/upload_image.php"),
headers: {"Content-Type": "application/json"},
body: jsonEncode({"name": fileName, "image": base64Image}));
print(response.body);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Upload Image"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_image == null
? Text('No image selected.')
: Image.file(_image),
ElevatedButton(
onPressed: getImage,
child: Text('Select Image'),
),
ElevatedButton(
onPressed: uploadImage,
child: Text('Upload Image'),
),
],
),
),
);
}
}
-
在
uploadImage()方法中,将选定的图片转换为base64编码,并将其上传到服务器。在这个例子中,我们将图片和文件名作为请求体发送到服务器。这里假设服务器端有一个名为upload_image.php的脚本来接收和处理请求。 -
运行应用程序并测试图片上传功能。
注意:此示例仅用于演示目的。在实际应用中,需要添加更多的错误处理和安全检查
原文地址: http://www.cveoy.top/t/topic/hunx 著作权归作者所有。请勿转载和采集!