tencent cloud

Cloud Object Storage

동향 및 공지
릴리스 노트
제품 공지
제품 소개
제품 개요
기능 개요
적용 시나리오
제품 장점
기본 개념
리전 및 액세스 도메인
규격 및 제한
제품 요금
과금 개요
과금 방식
과금 항목
프리 티어
과금 예시
청구서 보기 및 다운로드
연체 안내
FAQ
빠른 시작
콘솔 시작하기
COSBrowser 시작하기
사용자 가이드
요청 생성
버킷
객체
데이터 관리
일괄 프로세스
글로벌 가속
모니터링 및 알람
운영 센터
데이터 처리
스마트 툴 박스 사용 가이드
데이터 워크플로
애플리케이션 통합
툴 가이드
툴 개요
환경 설치 및 설정
COSBrowser 툴
COSCLI 툴
COSCMD 툴
COS Migration 툴
FTP Server 툴
Hadoop 툴
COSDistCp 툴
HDFS TO COS 툴
온라인 도구 (Onrain Dogu)
자가 진단 도구
실습 튜토리얼
개요
액세스 제어 및 권한 관리
성능 최적화
AWS S3 SDK를 사용하여 COS에 액세스하기
데이터 재해 복구 백업
도메인 관리 사례
이미지 처리 사례
COS 오디오/비디오 플레이어 사례
데이터 다이렉트 업로드
데이터 보안
데이터 검증
빅 데이터 사례
COS 비용 최적화 솔루션
3rd party 애플리케이션에서 COS 사용
마이그레이션 가이드
로컬 데이터 COS로 마이그레이션
타사 클라우드 스토리지 데이터를 COS로 마이그레이션
URL이 소스 주소인 데이터를 COS로 마이그레이션
COS 간 데이터 마이그레이션
Hadoop 파일 시스템과 COS 간 데이터 마이그레이션
데이터 레이크 스토리지
클라우드 네이티브 데이터 레이크
메타데이터 가속
데이터 레이크 가속기 GooseFS
데이터 처리
데이터 처리 개요
이미지 처리
미디어 처리
콘텐츠 조정
파일 처리
문서 미리보기
장애 처리
RequestId 가져오기
공용 네트워크로 COS에 파일 업로드 시 속도가 느린 문제
COS 액세스 시 403 에러 코드 반환
리소스 액세스 오류
POST Object 자주 발생하는 오류
보안 및 컴플라이언스
데이터 재해 복구
데이터 보안
액세스 관리
자주 묻는 질문
인기 질문
일반 문제
과금
도메인 규정 준수 문제
버킷 설정 문제
도메인 및 CDN 문제
파일 작업 문제
로그 모니터링 문제
권한 관리
데이터 처리 문제
데이터 보안 문제
사전 서명 URL 관련 문제
SDK FAQ
툴 관련 문제
API 관련 문제
Agreements
Service Level Agreement
개인 정보 보호 정책
데이터 처리 및 보안 계약
연락처
용어집

Flutter 직접 업로드 사례

PDF
포커스 모드
폰트 크기
마지막 업데이트 시간: 2025-09-19 10:43:53

소개

본 문서는 SDK에 의존하지 않고 간단한 코드로 Flutter에서 COS(Cloud Object Storage)의 버킷으로 파일을 직접 업로드하는 방법을 설명합니다.
주의:
본 문서의 내용은 XML 버전의 API를 기반으로 합니다.

전제 조건

1. COS 콘솔에 로그인하여 버킷을 생성하고 Bucket(버킷 이름)과 Region(리전 이름)을 획득하세요. 자세한 내용은 버킷 생성 문서를 참고하십시오.
2. CAM 콘솔에 로그인하여 프로젝트 SecretId와 SecretKey를 획득합니다.

작업 절차

전체 절차의 논리는 다음과 같습니다.
1. 클라이언트가 서버 인터페이스를 호출하여 파일 확장자를 전달하면, 서버는 확장자와 타임스탬프 등을 기반으로 cos key와 직접 업로드 url을 생성합니다.
2. 서버는 STS SDK를 통해 임시 키를 획득합니다.
3. 서버는 획득한 임시 키로 직접 업로드 url에 서명하고 url, 서명, 토큰 등의 정보를 반환합니다.
4. 클라이언트는 절차 3에서 획득한 정보를 바탕으로 직접 put 요청을 보내며, 서명과 토큰 등을 헤더에 포함하여 업로드합니다.
구체적인 코드는 Flutter 예제를 참고하십시오.

서버

주의:
정식 배포 시 서버에는 귀하의 웹사이트 자체 권한 검증 단계를 추가해야 합니다.
보안상의 이유로 서버드는 임시 키를 획득한 후 직접 업로드 url을 생성하고 즉시 서명해야 합니다. 자세한 내용은 서버 서명 사례을 참고하십시오.
구체적인 절차는 다음과 같습니다.
1. STS SDK를 통해 임시 키를 획득합니다.
2. 확장자에 따라 cos key와 직접 업로드 url을 생성합니다.
3. 임시 키를 사용하여 직접 업로드 url에 서명하고 직접 업로드 url, 서명, 토큰 등의 정보를 반환합니다.
서버 구성 절차:
1. 키, bucket 및 region을 구성합니다.
var config = {
// Tencent Cloud 키를 획득합니다. 제한된 권한을 가진 서브 사용자의 키 사용을 권장합니다. https://console.tencentcloud.com/cam/capi
secretId: process.env.COS_SECRET_ID,
secretKey: process.env.COS_SECRET_KEY,
// 키 유효 기간
durationSeconds: 1800,
// 여기에 버킷 및 리전을 입력합니다. 예: test-1250000000, ap-guangzhou
bucket: process.env.PERSIST_BUCKET,
region: process.env.PERSIST_BUCKET_REGION,
// 제한된 업로드 확장자
extWhiteList: ['jpg', 'jpeg', 'png', 'gif', 'bmp'],
};
2. 터미널 실행
npm install
3. 서비스 시작
node app.js
여기까지 서버가 성공적으로 시작되었으며, 클라이언트 프로세스를 시작할 수 있습니다.
다른 언어 또는 자체 구현이 필요한 경우 다음 프로세스를 참조할 수 있습니다.
1. 서버에서 임시 키를 획득합니다. 서버는 먼저 고정 키 SecretId, SecretKey를 사용하여 STS 서비스에서 임시 키를 획득하고, 임시 키 tmpSecretId, tmpSecretKey, sessionToken을 획득합니다. 자세한 내용은 임시 키 생성 및 사용 가이드 또는 cos-sts-sdk 문서를 참고하십시오.
2. 직접 업로드 url에 서명하여 authorization을 생성합니다.
3. 직접 업로드 url, authorization, sessionToken 등의 정보를 반환하며, 클라이언트가 파일을 업로드할 때 획득한 서명과 sessionToken을 각각 요청 헤더의 authorization 및 x-cos-security-token 필드에 넣습니다.

클라이언트(Flutter)

구체적인 코드는 Flutter 예제를 참고하십시오.

dio 네트워크 라이브러리 사용

1. 서버에서 직접 업로드 및 서명 정보를 요청합니다.
/// 직접 업로드 url 및 서명 등 획득
/// @param ext 파일 확장자. 직접 업로드 시 서버드에서 확장자에 따라 cos key 생성
/// @return 직접 업로드 url 및 서명 등
static Future<Map<String, dynamic>> getStsDirectSign(String ext) async {
Dio dio = Dio();
//직접 업로드 서명 비즈니스 서버 url(실제 환경에서는 정식 직접 업로드 서명 비즈니스 url로 교체해 주세요)
//직접 업로드 서명 비즈니스 서버 코드 예제는 https://github.com/tencentyun/cos-demo/blob/main/server/direct-sign/nodejs/app.js를 참고하십시오.
//10.91.22.16은 직접 업로드 서명 비즈니스 서버의 주소입니다. 예를 들어 위의 node 서비스와 같이, 직접 업로드 서명 비즈니스 서버에 접근할 수 있는 url이면 됩니다.
Response response = await dio.get('http://10.91.22.16:3000/sts-direct-sign',
queryParameters: {'ext': ext});
if (response.statusCode == 200) {
if (kDebugMode) {
print(response.data);
}
if (response.data['code'] == 0) {
return response.data['data'];
} else {
throw Exception(
'getStsDirectSign error code: ${response.data['code']}, error message: ${response.data['message']}');
}
} else {
throw Exception(
'getStsDirectSign HTTP error code: ${response.statusCode}');
}
}
2. 획득한 직접 업로드 및 서명 정보를 사용하여 파일 업로드를 시작합니다.
/// 파일 업로드
/// @param filePath 파일 경로
/// @param progressCallback 진행 상태 콜백
static Future<void> upload(String filePath, ProgressCallback progressCallback) async {
String ext = path.extension(filePath).substring(1);
Map<String, dynamic> directTransferData;
try {
directTransferData = await getStsDirectSign(ext);
} catch (err) {
if (kDebugMode) {
print(err);
}
throw Exception("getStsDirectSign fail");
}
String cosHost = directTransferData['cosHost'];
String cosKey = directTransferData['cosKey'];
String authorization = directTransferData['authorization'];
String securityToken = directTransferData['securityToken'];
String url = 'https://$cosHost/$cosKey';
File file = File(filePath);
Options options = Options(
method: 'PUT',
headers: {
'Content-Length': await file.length(),
'Content-Type': 'application/octet-stream',
'Authorization': authorization,
'x-cos-security-token': securityToken,
'Host': cosHost,
},
);
try {
Dio dio = Dio();
Response response = await dio.put(url,
data: file.openRead(),
options: options, onSendProgress: (int sent, int total) {
double progress = sent / total;
if (kDebugMode) {
print('Progress: ${progress.toStringAsFixed(2)}');
}
progressCallback(sent, total);
});
if (response.statusCode == 200) {
if (kDebugMode) {
print('업로드 성공');
}
} else {
throw Exception("업로드 실패 ${response.statusMessage}");
}
} catch (error) {
if (kDebugMode) {
print('Error: $error');
}
throw Exception("업로드 실패 ${error.toString()}");
}
}

네이티브 Http Client 네트워크 라이브러리 사용

1. 서버에서 직접 업로드 및 서명 정보를 요청합니다.
/// 직접 업로드 url 및 서명 등 획득
/// @param ext 파일 확장자. 직접 업로드 시 서버드에서 확장자에 따라 cos key 생성
/// @return 직접 업로드 url 및 서명 등
static Future<Map<String, dynamic>> _getStsDirectSign(String ext) async {
HttpClient httpClient = HttpClient();
//직접 업로드 서명 비즈니스 서버 url(정식 환경에서는 정식 직접 업로드 서명 비즈니스 url로 교체해 주세요)
//직접 업로드 서명 비즈니스 서버 코드 예제는 https://github.com/tencentyun/cos-demo/blob/main/server/direct-sign/nodejs/app.js를 참고하십시오.
//10.91.22.16은 직접 업로드 서명 비즈니스 서버의 주소입니다. 예를 들어 위의 node 서비스와 같이, 직접 업로드 서명 비즈니스 서버에 접근할 수 있는 url이면 됩니다.
HttpClientRequest request = await httpClient
.getUrl(Uri.parse("http://10.91.22.16:3000/sts-direct-sign?ext=$ext"));
HttpClientResponse response = await request.close();
String responseBody = await response.transform(utf8.decoder).join();
if (response.statusCode == 200) {
Map<String, dynamic> json = jsonDecode(responseBody);
if (kDebugMode) {
print(json);
}
httpClient.close();
if (json['code'] == 0) {
return json['data'];
} else {
throw Exception(
'getStsDirectSign error code: ${json['code']}, error message: ${json['message']}');
}
} else {
httpClient.close();
throw Exception(
'getStsDirectSign HTTP error code: ${response.statusCode}');
}
}
2. 획득한 직접 업로드 및 서명 정보를 사용하여 파일 업로드를 시작합니다.
/// 파일 업로드
/// @param filePath 파일 경로
/// @param progressCallback 진행 상태 콜백
static Future<void> upload(String filePath, ProgressCallback progressCallback) async {
// 직접 업로드 서명 등 정보 획득
String ext = path.extension(filePath).substring(1);
Map<String, dynamic> directTransferData;
try {
directTransferData = await _getStsDirectSign(ext);
} catch (err) {
if (kDebugMode) {
print(err);
}
throw Exception("getStsDirectSign fail");
}

String cosHost = directTransferData['cosHost'];
String cosKey = directTransferData['cosKey'];
String authorization = directTransferData['authorization'];
String securityToken = directTransferData['securityToken'];
String url = 'https://$cosHost/$cosKey';

File file = File(filePath);
int fileSize = await file.length();
HttpClient httpClient = HttpClient();
HttpClientRequest request = await httpClient.putUrl(Uri.parse(url));
request.headers.set('Content-Type', 'application/octet-stream');
request.headers.set('Content-Length', fileSize.toString());
request.headers.set('Authorization', authorization);
request.headers.set('x-cos-security-token', securityToken);
request.headers.set('Host', cosHost);
request.contentLength = fileSize;
Stream<List<int>> stream = file.openRead();
int bytesSent = 0;
stream.listen(
(List<int> chunk) {
bytesSent += chunk.length;
double progress = bytesSent / fileSize;
if (kDebugMode) {
print('Progress: ${progress.toStringAsFixed(2)}');
}
progressCallback(bytesSent, fileSize);
request.add(chunk);
},
onDone: () async {
HttpClientResponse response = await request.close();
if (response.statusCode == 200) {
if (kDebugMode) {
print('업로드 성공');
}
} else {
throw Exception("업로드 실패 $response");
}
},
onError: (error) {
if (kDebugMode) {
print('Error: $error');
}
throw Exception("업로드 실패 ${error.toString()}");
},
cancelOnError: true,
);
}

관련 문서

더 많은 인터페이스 호출 요구 사항이 있는 경우 Flutter SDK를 참고하십시오.

도움말 및 지원

문제 해결에 도움이 되었나요?

피드백