qiniu wxapp sdk
1.0.0
Qiniu Cloud API를 기반으로 개발된 WeChat Mini 프로그램 SDK
Qiniu-wxapp-SDK는 미니 프로그램에서 Qiniu Cloud를 구현한 것입니다. 네트워크 기능은 WeChat 미니 프로그램 API에 의존합니다. SDK 기반의 미니 프로그램에서 Qiniu Cloud에 파일을 쉽게 업로드할 수 있습니다.
Qiniu-wxapp-SDK는 클라이언트 SDK이며 토큰 생성 구현을 포함하지 않습니다. 보안상의 이유로 네트워크를 통해 서버에서 토큰을 얻는 것이 좋습니다. 다음 서버 SDK 설명서를 참조하세요. 이 부분은 현재 SDK 데모에 포함되어 있지 않습니다.
다른 기능은 개발 중이므로 계속 지켜봐 주시기 바랍니다.
github에서 qiniuUploader.js를 다운로드하고 미니 프로그램 프로젝트를 가져옵니다.
SDK를 사용하기 전에 먼저 Qiniu Cloud 계정을 등록하고 콘솔에 로그인하여 유효한 AccessKey와 SecretKey 쌍을 받아야 합니다. Qiniu에 액세스하는 방법 및 보안 메커니즘을 읽고 키를 올바르게 사용하고 관리하는 방법을 자세히 알아볼 수 있습니다. .
SDK는 서버에 의존하여 업토큰을 발행하며, 이는 다음 두 가지 방법으로 달성할 수 있습니다.
중국 동부, 중국 남부 등 Qiniu存储空间어느 지역에 설정되어 있는지 알아야 합니다. 지역 설정을 참조하세요.
백엔드 서비스는 애플릿이 주소를 요청하고 업토큰을 얻을 수 있도록 URL 주소를 제공해야 합니다. 요청이 성공하면 서버는 다음 형식(적어도 uptoken 필드 포함)으로 json을 반환해야 합니다.
{
"uptoken": "0MLvWPnyya1WtPnXFy9KLyGHyFPNdZceomL..."
}
생성한 Qiniu存储空间에 따라 해당 https 업로드 주소를 미니 프로그램의 액세스 허용 목록에 추가하세요. 방법은 다음과 같습니다.
- WeChat 공개 플랫폼에 로그인하고 설정 - 개발 설정 으로 이동한 후 서버 구성 아래의 " 수정 " 링크를 클릭하세요.
- uploadFile 도메인 이름을 수정합니다. (예: 중국 동부 https 업로드 주소는
https://up.qiniup.com입니다. 주소에 무엇을 써야할지 모르시는 경우 https 주소 부록을 참조하세요.)- 파일을 다운로드해야 하는 경우 downloadFile 도메인 이름을 버킷 다운로드 주소로 설정해야 합니다.
- 그냥 저장하세요
| 필드 이름 | 콘텐츠 |
|---|---|
| 도메인 이름 요청 | https://yourServce.com |
| uploadFile 도메인 이름 | https://up.qiniup.com (저장공간에 맞게 작성) |
| 다운로드파일 도메인 이름 | https://baldkf.bkt.clouddn.com |
Qiniu Cloud 파일 업로드 인터페이스, 파일은 일치하는 인터페이스로 전송되며 저장 영역은 HTTPS 주소에 해당합니다. 공식 문서를 참조하세요.
| 저장 공간 | 지역 코드 | HTTPS 주소 |
|---|---|---|
| 중국 동부 | ECN | https://up.qiniup.com |
| 중국 북부 | NCN | https://up-z1.qiniup.com |
| 중국 남부 | SCN | https://up-z2.qiniup.com |
| 북아메리카 | 해당 없음 | https://up-na0.qiniup.com |
| 싱가포르 | ASG | https://up-as0.qiniup.com |
참고!! WeChat은 현재 도메인 이름 허용 목록을 한 달에 3번만 수정하도록 제한합니다.
한 가지 설치 방법을 일시적으로 지원합니다.
저장소를 직접 복제
git clone https://github.com/gpake/qiniu-wxapp-sdk.git
qiniuUploader.js 및 qiniuUploader.ts 파일은 이 프로젝트의 sdk 디렉터리에 있습니다.
데모의 사용법을 참고하고 데모의 index.wxml 페이지에서 UI 버튼에 바인딩된 이벤트를 업로드하는 것으로 시작하는 것이 좋습니다.
const qiniuUploader = require ( "../../../utils/qiniuUploader" ) ; const qiniuUploader = require ( "../../utils/qiniuUploader" ) ;
// index.js
// 初始化七牛云相关配置
function initQiniu ( ) {
var options = {
// bucket所在区域，这里是华北区。ECN, SCN, NCN, NA, ASG，分别对应七牛云的：华东，华南，华北，北美，新加坡 5 个区域
region : 'NCN' ,
// 获取uptoken方法三选一即可，执行优先级为：uptoken > uptokenURL > uptokenFunc。三选一，剩下两个置空。推荐使用uptokenURL，详情请见 README.md
// 由其他程序生成七牛云uptoken，然后直接写入uptoken
uptoken : '' ,
// 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "0MLvWPnyy..."}
uptokenURL : 'https://[yourserver.com]/api/uptoken' ,
// uptokenFunc 这个属性的值可以是一个用来生成uptoken的函数，详情请见 README.md
uptokenFunc : function ( ) {
// do something
return qiniuUploadToken ;
} ,
// bucket 外链域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 fileURL 字段。否则需要自己拼接
domain : 'http://[yourBucketId].bkt.clouddn.com' ,
// qiniuShouldUseQiniuFileName 如果是 true，则文件的 key 由 qiniu 服务器分配（全局去重）。如果是 false，则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑，默认是 false。
// 微信自动生成的 filename较长，导致fileURL较长。推荐使用{qiniuShouldUseQiniuFileName: true} + "通过fileURL下载文件时，自定义下载名" 的组合方式。
// 自定义上传key 需要两个条件：1. 此处shouldUseQiniuFileName值为false。 2. 通过修改qiniuUploader.upload方法传入的options参数，可以进行自定义key。（请不要直接在sdk中修改options参数，修改方法请见demo的index.js）
// 通过fileURL下载文件时，文件自定义下载名，请参考：七牛云“对象存储 > 产品手册 > 下载资源 > 下载设置 > 自定义资源下载名”（https://developer.qiniu.com/kodo/manual/1659/download-setting）。本sdk在README.md的"常见问题"板块中，有"通过fileURL下载文件时，自定义下载名"使用样例。
shouldUseQiniuFileName : false
} ;
// 将七牛云相关配置初始化进本sdk
qiniuUploader . init ( options ) ;
}
//获取应用实例
var app = getApp ( )
Page ( {
data : {
// 图片上传（从相册）返回对象。上传完成后，此属性被赋值
imageObject : { } ,
// 文件上传（从客户端会话）返回对象。上传完成后，此属性被赋值
messageFileObject : { } ,
// 图片上传（从相册）进度对象。开始上传后，此属性被赋值
imageProgress : { } ,
// 文件上传（从客户端会话）进度对象。开始上传后，此属性被赋值
messageFileProgress : { } ,
// 文件在线查看来源fileUrl
viewFileOnlineFileUrl : '' ,
// 文件下载进度对象。用于文件在线查看前的预下载
downloadFileProgress : { } ,
// 此属性在qiniuUploader.upload()中被赋值，用于中断上传
cancelTask : function ( ) { }
} ,
//事件处理函数
onLoad : function ( ) {
console . log ( 'onLoad' ) ;
var that = this ;
} ,
// 图片上传（从相册）方法
didPressChooesImage : function ( ) {
var that = this ;
didPressChooesImage ( that ) ;
} ,
// 文件上传（从客户端会话）方法，支持图片、视频、其余文件 (PDF(.pdf), Word(.doc/.docx), Excel(.xls/.xlsx), PowerPoint(.ppt/.pptx)等文件格式)
didPressChooesMessageFile : function ( ) {
var that = this ;
didPressChooesMessageFile ( that ) ;
} ,
// 在线查看文件，支持的文件格式：pdf, doc, docx, xls, xlsx, ppt, pptx。关于wx.openDocument方法，详情请参考微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html
didPressViewFileOnline : function ( ) {
var that = this ;
didPressViewFileOnline ( that ) ;
} ,
// 中断上传方法
didCancelTask : function ( ) {
this . data . cancelTask ( ) ;
}
} ) ;
// 图片上传（从相册）方法
function didPressChooesImage ( that ) {
// 详情请见demo部分 index.js
}
// 文件上传（从客户端会话）方法，支持图片、视频、其余文件 (PDF(.pdf), Word(.doc/.docx), Excel(.xls/.xlsx), PowerPoint(.ppt/.pptx)等文件格式)
function didPressChooesMessageFile ( that ) {
// 详情请见demo部分 index.js
}
// 在线查看文件，支持的文件格式：pdf, doc, docx, xls, xlsx, ppt, pptx。关于wx.openDocument方法，详情请参考微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html
function didPressViewFileOnline ( that ) {
// 详情请见demo部分 index.js
} // 请先参照微信小程序开发文档配置 TypeScript 支持
import { upload } from 'qiniuUploader.ts' ;
Page ( {
didPressChooseImage : function ( ) {
wx . chooseImage ( {
count : 1 ,
success : function ( res ) {
var filePath = res . tempFilePaths [ 0 ] ;
upload ( {
filePath : filePath ,
options : {
key : '' , // 可选
region : '' , // 可选(默认为'ECN')
domain : '' ,
uptoken : '' , // 以下三选一
uptokenURL : '' ,
uptokenFunc : ( ) => {
return '[yourTokenString]' ;
} ,
shouldUseQiniuFileName : true // 默认true
} ,
before : ( ) => {
// 上传前
console . log ( 'before upload' ) ;
} ,
success : ( res ) => {
that . setData ( {
'imageObject' : res
} ) ;
console . log ( 'file url is: ' + res . fileUrl ) ;
} ,
fail : ( err ) => {
console . log ( 'error:' + err ) ;
} ,
progress : ( res ) => {
console . log ( '上传进度' , res . progress )
console . log ( '已经上传的数据长度' , res . totalBytesSent )
console . log ( '预期需要上传的数据总长度' , res . totalBytesExpectedToSend )
} ,
complete : ( err ) => {
// 上传结束
console . log ( 'upload complete' ) ;
}
} ) ;
}
} ) ;
}
} )WeChat 웹 개발자 도구를 사용하여 데모 폴더를 연 후 index.js에서 관련 매개변수를 구성하여 데모를 사용하세요.
var options = {
// bucket所在区域，这里是华北区。ECN, SCN, NCN, NA, ASG，分别对应七牛云的：华东，华南，华北，北美，新加坡 5 个区域
region : 'NCN' ,
// 获取uptoken方法三选一即可，执行优先级为：uptoken > uptokenURL > uptokenFunc。三选一，剩下两个置空。推荐使用uptokenURL，详情请见 README.md
// 由其他程序生成七牛云uptoken，然后直接写入uptoken
uptoken : '' ,
// 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "0MLvWPnyy..."}
uptokenURL : 'https://[yourserver.com]/api/uptoken' ,
// uptokenFunc 这个属性的值可以是一个用来生成uptoken的函数，详情请见 README.md
uptokenFunc : function ( ) {
// do something
return qiniuUploadToken ;
} ,
// bucket 外链域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 fileURL 字段。否则需要自己拼接
domain : 'http://[yourBucketId].bkt.clouddn.com' ,
// qiniuShouldUseQiniuFileName 如果是 true，则文件的 key 由 qiniu 服务器分配（全局去重）。如果是 false，则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑，默认是 false。
// 微信自动生成的 filename较长，导致fileURL较长。推荐使用{qiniuShouldUseQiniuFileName: true} + "通过fileURL下载文件时，自定义下载名" 的组合方式。
// 自定义上传key 需要两个条件：1. 此处shouldUseQiniuFileName值为false。 2. 通过修改qiniuUploader.upload方法传入的options参数，可以进行自定义key。（请不要直接在sdk中修改options参数，修改方法请见demo的index.js）
// 通过fileURL下载文件时，文件自定义下载名，请参考：七牛云“对象存储 > 产品手册 > 下载资源 > 下载设置 > 自定义资源下载名”（https://developer.qiniu.com/kodo/manual/1659/download-setting）。本sdk在README.md的"常见问题"板块中，有"通过fileURL下载文件时，自定义下载名"使用样例。
shouldUseQiniuFileName : false
} ;
// 图片上传（从相册）方法
function didPressChooesImage ( that ) {
// 详情请见demo部分 index.js
}
// 文件上传（从客户端会话）方法，支持图片、视频、其余文件 (PDF(.pdf), Word(.doc/.docx), Excel(.xls/.xlsx), PowerPoint(.ppt/.pptx)等文件格式)
function didPressChooesMessageFile ( that ) {
// 详情请见demo部分 index.js
}
// 在线查看文件，支持的文件格式：pdf, doc, docx, xls, xlsx, ppt, pptx。关于wx.openDocument方法，详情请参考微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html
function didPressViewFileOnline ( that ) {
// 详情请见demo部分 index.js
}저장공간의 저장영역은 저장공간 생성시 선택 가능합니다.
SDK는 Ajax 요청 주소 uptokenURL 제공하거나 uptoken을 반환할 수 있는 uptokenFunc 함수를 제공하여 직접 설정할 수 있는 uptoken 사용합니다.
var options = {
// bucket所在区域，这里是华北区。ECN, SCN, NCN, NA, ASG，分别对应七牛云的：华东，华南，华北，北美，新加坡 5 个区域
region : 'NCN' ,
// 获取uptoken方法三选一即可，执行优先级为：uptoken > uptokenURL > uptokenFunc。三选一，剩下两个置空。推荐使用uptokenURL，详情请见 README.md
// 由其他程序生成七牛云uptoken，然后直接写入uptoken
uptoken : '' ,
// 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "0MLvWPnyy..."}
uptokenURL : 'https://[yourserver.com]/api/uptoken' ,
// uptokenFunc 这个属性的值可以是一个用来生成uptoken的函数，详情请见 README.md
uptokenFunc : function ( ) {
// do something
return qiniuUploadToken ;
} ,
// bucket 外链域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 fileURL 字段。否则需要自己拼接
domain : 'http://[yourBucketId].bkt.clouddn.com' ,
// qiniuShouldUseQiniuFileName 如果是 true，则文件的 key 由 qiniu 服务器分配（全局去重）。如果是 false，则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑，默认是 false。
// 微信自动生成的 filename较长，导致fileURL较长。推荐使用{qiniuShouldUseQiniuFileName: true} + "通过fileURL下载文件时，自定义下载名" 的组合方式。
// 自定义上传key 需要两个条件：1. 此处shouldUseQiniuFileName值为false。 2. 通过修改qiniuUploader.upload方法传入的options参数，可以进行自定义key。（请不要直接在sdk中修改options参数，修改方法请见demo的index.js）
// 通过fileURL下载文件时，文件自定义下载名，请参考：七牛云“对象存储 > 产品手册 > 下载资源 > 下载设置 > 自定义资源下载名”（https://developer.qiniu.com/kodo/manual/1659/download-setting）。本sdk在README.md的"常见问题"板块中，有"通过fileURL下载文件时，自定义下载名"使用样例。
shouldUseQiniuFileName : false
} ;Qiniu의 업로드 전략에 대해 더 자세히 알고 싶다면 Qiniu의 공식 문서 - 업로드를 주의 깊게 읽어 보시기 바랍니다. Qiniu의 업로드 전략은 백엔드 서비스에 지정됩니다.
예: Qiniuyun java SDK에서는 파일을 업로드한 후 반환된 객체에 파일 크기 fsize , 파일 유형 mimeType 등의 필드가 포함되도록 매직 변수를 지정할 수 있다고 언급했습니다.
Qiniu의 이미지 처리에 대해 더 자세히 알고 싶다면 Qiniu의 공식 문서 - 이미지 처리를 주의 깊게 읽어 보시기 바랍니다.
SDK 예시에서 uptotken을 생성할 때 지정된 Bucket Name 은 공개 공간이므로 업로드 성공 후 리소스에 공개적으로 액세스할 수 있습니다. 업토큰 생성 시 지정한 Bucket Name 비공개 공간인 경우, 업로드한 리소스에 접근하려면 서버에서 추가 처리를 수행해야 합니다. 자세한 내용은 인증서 다운로드를 참조하세요. 일부 SDK 데이터 처리 기능은 개인 공간에는 적용되지 않습니다.
키 업로드 정보
업로드 시 파일 키를 지정하지 않으면 wx.chooesImage 에서 얻은 tmp filePath가 파일 키로 사용됩니다. 예: tmp_xxxxxxx.jpg .
또는 qiniu 서버에서 할당한 키(전역 중복 제거)를 사용할 수 있습니다. 예: Fh6qfpY... (권장 방법)
WeChat에서 자동으로 생성된 파일 이름이 더 길어서 fileURL도 길어집니다. {qiniuShouldUseQiniuFileName: true} + "fileURL을 통해 파일을 다운로드할 때 다운로드 이름을 사용자 지정하세요" 조합을 사용하는 것이 좋습니다.
자세한 내용은 데모의 index.js 에 있는 shouldUseQiniuFileName 속성과 SDK의 qiniuShouldUseQiniuFileName 속성을 참조하세요.
업로드를 취소하고 업로드를 일시중지하도록 설정:
index.js 의 data.cancelTask 데모 섹션을 참조하세요. SDK의 qiniuUploader.js 에 있는 cancelTask 메소드입니다.
또한 데모 페이지에는 업로드를 중단하는 UI 데모가 있습니다.
업로드된 파일 유형을 제한합니다.
이미지 파일, 동영상 파일, 기타 파일(PDF(.pdf), Word(.doc/.docx), Excel(.xls/.xlsx), PowerPoint(.ppt/.pptx) 및 기타 파일 형식)을 지원합니다.
데모 섹션의 index.wxml 페이지에는 이미지 업로드(앨범에서) 및 파일 업로드(클라이언트 세션에서)에 대한 UI 데모가 있습니다.
fileURL을 통해 파일을 다운로드할 때 다운로드 이름을 맞춤설정하세요.
참조: Qiniu Cloud "오브젝트 스토리지 > 제품 매뉴얼 > 리소스 다운로드 > 다운로드 설정 > 사용자 정의 리소스 다운로드 이름"(https://developer.qiniu.com/kodo/manual/1659/download-setting) 예: fileUrl은 http://xxx.com/keyyyyy , 이 링크에서 다운로드한 파일을 브라우저에서 직접 엽니다. 파일 이름은 "keyyyyy"입니다.
다운로드한 파일의 이름을 "myName"으로 사용자 정의하려면 http://xxx.com/keyyyyy?attname=myName , 즉 "fileUrl" + "?attname=" + "를 통해 다운로드할 수 있습니다. 사용자 정의 파일 이름" 방법.
https://github.com에 로그인하세요.
포크 [email protected]:gpake/qiniu-wxapp-sdk.git
기능 브랜치 생성(git checkout -b new-feature)
변경 사항을 커밋합니다(git commit -am '일부 기능을 추가했거나 버그를 수정했습니다').
변경 기록을 원격 Git 저장소(git push Origin new-feature)에 제출하세요.
그런 다음 github 웹사이트로 이동하여 git 원격 저장소의 new-feature 분기에서 끌어오기 요청을 시작하세요.
GPL V3 라이센스
