플러터(Flutter)에서 스팀잇에 이미지 업로드하기
이미지 피커 ImagePicker
https://pub.dev/packages/image_picker
ImagePicker를 사용하면 갤러리에서 이미지를 선택하거나 카메라로 사진을 찍는 기능을 쉽게 구현할 수 있습니다.
image_picker를 설치합니다.
$ flutter pub add image_picker
ImagePicker 사용하기
image_picker는 위젯에서 아래와 같이 사용합니다.
import 'package:image_picker/image_picker.dart';
// ...
final ImagePicker _picker = ImagePicker();
final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
if (image != null) {
// 이미지 서명하기
final imageBytes = await image.readAsBytes();
final signature = await signImage(imageBytes, password);
// 이미지 업로드하기
final response = await uploadImage(image, username, signature);
}
이미지 서명 함수 구현하기
서명에는 steemdart_ecc 패키지를 사용합니다.
steemdart_ecc 패키지는 아직 디벨롭 중이지만, steem 서명 함수는 구현되어 있습니다.
https://github.com/anpigon/steemdart_ecc
import 'package:steemdart_ecc/steemdart_ecc.dart'
Future signImage(
Uint8List imageBytes,
String password,
) async {
try {
final prefix = utf8.encode('ImageSigningChallenge');
final imageBytes = await image.readAsBytes();
final buff = BytesBuilder();
buff.add(prefix);
buff.add(imageBytes);
final privateKey = SteemPrivateKey.fromString(password);
final signature = privateKey.sign(buff.toBytes());
return signature;
} catch (error, stackTrace) {
logger.e('failed to sign images', error, stackTrace);
rethrow;
}
}
이미지 업로드 함수 구현하기
플러터에서 이미지를 업로드하기 위해 dio 패키지를 사용했습니다.
HTTP requests는 http 패키지가 인기가 더 많습니다.
하지만 저는 파일업로드를 dio로 구현하는게 더 쉽습니다.
import 'package:dio/dio.dart';
Future uploadImage(
XFile media,
String username,
SteemSignature signature,
) async {
final multipartFile = await MultipartFile.fromFile(media.path);
final formData = FormData.fromMap({"file": multipartFile});
const imageApi = "https://steemitimages.com";
final uploadUrl = "$imageApi/$username/${signature.toHex()}";
final response = await Dio().post(
uploadUrl,
data: formData,
options: Options(
contentType: 'multipart/form-data',
headers: {
'Authorization': imageApi,
},
),
);
return response;
}
응답 결과
이미지 업로드에 성공하면 다음과 같은 응답 결과를 받게 됩니다.
{"url":"https://cdn.steemitimages.com/DQmeAr3G3DG6ocMJe4B63iD5ew7vu3oP2s2piLivYkowgh6/l26awe5s.jpg"}
구현하는데 참고한 문서
플러터에 steemit 이미지 업로드를 구현하기위해 steem 개발 문서와 이타인님의 블로그 글을 참고했습니다. 이타인님의 글이 정말 많은 도움이 되었습니다. 감사합니다.
[광고] STEEM 개발자 커뮤니티에 참여 하시면, 다양한 혜택을 받을 수 있습니다.
Upvoted! Thank you for supporting witness @jswit.
Please check my new project, STEEM.NFT. Thank you!
[PGM] MAC 용 터미널 프로그램 warp 추천
https://www.steemit.com/@wonsama/pgm-mac-warp
@wonsama님이 당신을 멘션하였습니다.
멘션을 받고 싶거나 받지 않으시려면 댓글을 남겨주세요. 빠른 시일내에 반영하도록 하겠습니다.
steemdart_ecc 이걸로 사이닝이 가능하군요!
지난 번에 잘 안됐던거 같았는데, 저도 다시 해봐야겠습니다.
고맙습니다!
dsteem의 sign함수와 결과가 조금 다르게 나오네요. 처음은 제대로 업로드 되는데, 이어서 업로드하면 invalid signature 에러가 나오는데, 혹시 이미지 2개 이어서 해보셨나요?