qiniu wxapp sdk
1.0.0
Qiniu Cloud APIに基づいて開発されたWeChatミニプログラム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 はサーバーに依存してアップトークンを発行します。これは次の 2 つの方法で実現できます。
中国東部、中国南部など、Qiniu存储空间どの地域に設定されているかを知る必要があります。「地域設定」を参照してください。
バックエンド サービスは、アプレットがアドレスを要求してアップトークンを取得するための URL アドレスを提供する必要があります。リクエストが成功すると、サーバーは次の形式で json を返す必要があります (少なくとも uptoken フィールドを含む)。
{
"uptoken": "0MLvWPnyya1WtPnXFy9KLyGHyFPNdZceomL..."
}
作成した Qiniu存储空间に従って、対応する https アップロード アドレスをミニ プログラムのアクセス ホワイトリストに追加します。方法は次のとおりです。
- WeChat パブリック プラットフォームにログインし、 [設定] - [開発設定]に移動し、 [サーバー構成]の下にある [変更] リンクをクリックします。
- UploadFile ドメイン名を変更します (たとえば、中国東部の https アップロード アドレスは
https://up.qiniup.comです。アドレスに何を書けばよいかわからない場合は、https アドレスの付録を参照してください)。- ファイルをダウンロードする必要がある場合は、 downloadFile ドメイン名をバケットのダウンロード アドレスとして設定する必要もあります。
- 保存してください
| フィールド名 | コンテンツ |
|---|---|
| リクエストドメイン名 | https://yourServce.com |
| アップロードファイルのドメイン名 | 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 |
| 北米 | NA | https://up-na0.qiniup.com |
| シンガポール | ASG | https://up-as0.qiniup.com |
注!!現在、WeChat ではドメイン名のホワイトリストの変更を月あたり 3 回までに制限しています。
1 つのインストール方法を一時的にサポートします
リポジトリを直接クローン作成する
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 Web 開発者ツールを使用してデモ フォルダーを開き、デモを使用するために 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 はuptokenに依存します。これは、Ajax リクエスト アドレスuptokenURLを提供するか、uptoken を返す関数uptokenFunc提供することによって直接設定できます。
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 によって自動的に生成されるファイル名は長くなり、その結果、ファイル URL も長くなります。 {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 プッシュ オリジンの新機能)
次に、github Web サイトにアクセスし、git リモート リポジトリの新機能ブランチでプル リクエストを開始します。
GPL V3 ライセンス
