릴리스 노트
제품 공지
미니프로그램 직접 업로드 사례
포커스 모드
폰트 크기
소개
본 문서는 SDK에 의존하지 않고 간단한 코드로 미니프로그램에서 COS(Cloud Object Storage)의 버킷으로 파일을 직접 업로드하는 방법을 설명합니다.
주의:
본 문서의 내용은 XML 버전의 API를 기반으로 합니다.
전제 조건
2. CAM 콘솔에 로그인하여 API 키 관리 페이지에서 프로젝트 SecretId와 SecretKey를 가져오십시오.
3. 미니프로그램 도메인 화이트리스트 구성
미니프로그램에서 COS 요청 시 WeChat 공식 플랫폼에 로그인하여 '개발' > '개발 설정'에서 도메인 화이트리스트를 구성해야 합니다. SDK는 두 개의 인터페이스인 wx.uploadFile 및 wx.request를 사용합니다.
cos.postObject는 wx.uploadFile을 사용하여 요청을 전송합니다.
다른 방법은 wx.request를 사용하여 요청을 전송합니다.
둘은 모두 해당 화이트리스트에 COS 도메인을 구성해야 합니다. 예:
examplebucket-1250000000.cos.ap-guangzhou.myqcloud.com.솔루션 설명
실행 과정
1. 프론트엔드에서 파일을 선택하면, 프론트엔드가 확장자를 서버로 전송합니다.
2. 서버는 확장자에 따라 시간이 포함된 임의의 COS 파일 경로를 생성하고, 해당 서명을 계산하여 URL 및 서명 정보를 프론트엔드에 반환합니다.
3. 프론트엔드는 PUT 또는 POST 요청을 사용하여 파일을 COS에 직접 업로드합니다.
솔루션 장점
권한 보안: 서버 측 서명을 사용하면 안전한 권한 범위를 효과적으로 제한할 수 있으며, 지정된 하나의 파일 경로 업로드에만 사용 가능합니다.
경로 보안: 서버 측에서 결정한 임의의 COS 파일 경로를 사용하면 기존 파일의 덮어쓰기 문제와 보안 위험을 효과적으로 방지할 수 있습니다.
작업 절차
서버 측 서명 구성
주의:
정식 배포 시 서버 측에는 사용자의 웹사이트 자체 권한 검증 단계를 추가해야 합니다.
서명 계산 방법은 요청 서명 문서를 참고하십시오.
서버는 Node.js를 사용하여 서명을 계산합니다. Node.js 예제를 참고하십시오.
신규 사용자는 빠른 시작 문서를 참고하십시오.
미니프로그램 업로드 예제
구체적인 단계는 다음과 같습니다.
1. WeChat 미니프로그램 프로젝트를 생성하고, 개발자 도구를 열어 새 프로젝트를 생성한 후 AppID를 입력합니다.
2. 프로젝트에서 새 페이지를 찾거나 생성합니다(예: pages/index/index.js). 해당 페이지에 다음과 같은 직접 업로드 코드를 추가합니다.
3. 코드에서 해당 서버 주소를 수정합니다.
4. 서버는 Node.js를 사용하여 서명을 계산합니다. Node.js 예제를 참고하십시오.
5. WeChat 공식 플랫폼의개발 > 개발 설정에서 도메인 화이트리스트를 구성하고, SDK는 wx.uploadFile 및 wx.request 두 개의 인터페이스를 사용합니다.
POST로 업로드
var uploadFile = function () {// 더 많은 문자 인코딩의 url encode 형식var camSafeUrlEncode = function (str) {return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\\(/g, '%28').replace(/\\)/g, '%29').replace(/\\*/g, '%2A');};// 서명 가져오기var getAuthorization = function (options, callback) {wx.request({method: 'GET',// 해당 서버 주소를 수정하여 post 업로드 서명을 가져오기url: 'http://127.0.0.1:3000/post-policy?ext=' + options.ext,dataType: 'json',success: function (result) {var data = result.data;if (data) {callback(data);} else {wx.showModal({title: '임시 키 가져오기 실패',content: JSON.stringify(data),showCancel: false,});}},error: function (err) {wx.showModal({title: '임시 키 가져오기 실패',content: JSON.stringify(err),showCancel: false,});},});};/*** prefix: cos 요청 url* filePath: 미니프로그램에서 업로드할 파일의 경로 선택* key: cos에 업로드할 경로* formData: 서버에서 반환된 인증 매개변수*/var postFile = function ({ prefix, filePath, key, formData }) {var requestTask = wx.uploadFile({url: prefix,name: 'file',filePath: filePath,formData: formData,success: function (res) {var url = prefix + '/' + camSafeUrlEncode(key).replace(/%2F/g, '/');if (res.statusCode === 200) {wx.showModal({ title: '업로드 성공', content: url, showCancel: false });} else {wx.showModal({title: '업로드 실패',content: JSON.stringify(res),showCancel: false,});}console.log(res.header['x-cos-request-id']);console.log(res.statusCode);console.log(url);},fail: function (res) {wx.showModal({title: '업로드 실패',content: JSON.stringify(res),showCancel: false,});},});requestTask.onProgressUpdate(function (res) {console.log('진행 상황:', res);});};// 파일 업로드var uploadFile = function (filePath) {var extIndex = filePath.lastIndexOf('.');var fileExt = extIndex >= -1 ? filePath.substr(extIndex + 1) : '';// 파일 확장자를 전송하여 서버가 서명이 포함된 url 생성하기getAuthorization({ ext: fileExt }, function (AuthData) {// AuthData 형식이 올바른지 확인console.log(AuthData);// 요청에 사용되는 매개변수var prefix = 'https://' + AuthData.cosHost; // 요청 urlvar key = AuthData.cosKey; // 보안 강화로 서버에서 파일명을 결정하기var formData = {key: key,success_action_status: 200,'Content-Type': '','q-sign-algorithm': AuthData.qSignAlgorithm,'q-ak': AuthData.qAk,'q-key-time': AuthData.qKeyTime,'q-signature': AuthData.qSignature,policy: AuthData.policy,};if (AuthData.securityToken)formData['x-cos-security-token'] = AuthData.securityToken;postFile({ prefix, filePath, key, formData });});};// 파일 선택wx.chooseMedia({count: 1, // 기본값: 9sizeType: ['original'], // 원본/압축 이미지 지정 가능, 기본적으로 원본 이미지를 사용함sourceType: ['album', 'camera'], // 앨범/카메라 소스 지정 가능, 기본적으로 둘 다 포함됨success: function (res) {uploadFile(res.tempFiles[0].tempFilePath);},});};
PUT로 업로드
var uploadFile = function () {// 더 많은 문자 인코딩의 url encode 형식var camSafeUrlEncode = function (str) {return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\\(/g, '%28').replace(/\\)/g, '%29').replace(/\\*/g, '%2A');};// 서명 가져오기var getAuthorization = function (options, callback) {wx.request({method: 'GET',// 해당 서버 주소를 수정하여 put 업로드 서명을 가져오기url: 'http://127.0.0.1:3000/put-sign?ext=' + options.ext,dataType: 'json',success: function (result) {var data = result.data;if (data) {callback(data);} else {wx.showModal({title: '임시 키 가져오기 실패',content: JSON.stringify(data),showCancel: false,});}},error: function (err) {wx.showModal({title: '임시 키 가져오기 실패',content: JSON.stringify(err),showCancel: false,});},});};/*** prefix: cos 요청 url* filePath: 미니프로그램에서 업로드할 파일의 경로 선택* key: cos에 업로드할 경로* formData: 서버에서 반환된 인증 매개변수*/var putFile = function ({ prefix, filePath, key, AuthData }) {// put 업로드 시 파일의 실제 내용을 읽어야 함const wxfs = wx.getFileSystemManager();wxfs.readFile({filePath: filePath,success: function (fileRes) {var requestTask = wx.request({url: prefix + '/' + key,method: 'PUT',header: {Authorization: AuthData.authorization,'x-cos-security-token': AuthData.securityToken,},data: fileRes.data,success: function success(res) {var url = prefix + '/' + camSafeUrlEncode(key).replace(/%2F/g, '/');if (res.statusCode === 200) {wx.showModal({title: '업로드 성공',content: url,showCancel: false,});} else {wx.showModal({title: '업로드 실패',content: JSON.stringify(res),showCancel: false,});}console.log(res.statusCode);console.log(url);},fail: function fail(res) {wx.showModal({title: '업로드 실패',content: JSON.stringify(res),showCancel: false,});},});},});};// 파일 업로드var uploadFile = function (filePath) {var extIndex = filePath.lastIndexOf('.');var fileExt = extIndex >= -1 ? filePath.substr(extIndex + 1) : '';getAuthorization({ ext: fileExt }, function (AuthData) {// AuthData 형식이 올바른지 확인console.log(AuthData);const prefix = 'https://' + AuthData.cosHost;const key = AuthData.cosKey;putFile({ prefix, filePath, key, AuthData });});};// 파일 선택wx.chooseMedia({count: 1, // 기본값: 9sizeType: ['original'], // 원본/압축 이미지 지정 가능, 기본적으로 원본 이미지를 사용함sourceType: ['album', 'camera'], // 앨범/카메라 소스 지정 가능, 기본적으로 둘 다 포함됨success: function (res) {uploadFile(res.tempFiles[0].tempFilePath);},});};
관련 문서
미니프로그램 SDK를 사용하려면 미니프로그램 SDK 빠른 시작 문서를 참고하십시오.
피드백