qiniu wxapp sdk
1.0.0
WeChat Mini Program SDK desenvolvido com base na API Qiniu Cloud
Qiniu-wxapp-SDK é a implementação do Qiniu Cloud no miniprograma. As funções de rede dependem da API do miniprograma WeChat. Você pode facilmente fazer upload de arquivos para Qiniu Cloud no miniprograma baseado no SDK.
Qiniu-wxapp-SDK é um SDK cliente e não inclui implementação de geração de token. Por motivos de segurança, é recomendado obter o token do servidor por meio da rede. Para obter código de geração específico, consulte a seguinte documentação do SDK do servidor. Esta parte não está incluída atualmente na demonstração do SDK.
Outros recursos estão em desenvolvimento, fique atento.
Baixe qiniuUploader.js do github e importe o projeto do miniprograma.
Antes de usar o SDK, você deve primeiro registrar uma conta Qiniu Cloud e fazer login no console para obter um par de AccessKey e SecretKey válidos. Você pode ler Como acessar o Qiniu e o mecanismo de segurança para saber mais sobre como usar e gerenciar chaves corretamente. .
O SDK depende do servidor para emitir uptoken, o que pode ser alcançado das duas maneiras a seguir:
Você precisa saber em qual região seu存储空间Qiniu está instalado, como Leste da China, Sul da China, etc., consulte Configurações Regionais
O serviço de back-end deve fornecer um endereço URL para o miniaplicativo solicitar o endereço e obter o uptoken. Depois que a solicitação for bem-sucedida, o servidor deverá retornar json no seguinte formato (incluindo pelo menos o campo uptoken):
{
"uptoken": "0MLvWPnyya1WtPnXFy9KLyGHyFPNdZceomL..."
}
De acordo com o存储空间Qiniu que você criou, adicione o endereço de upload https correspondente à lista de permissões de acesso do miniprograma.
- Faça login na plataforma pública WeChat, vá para Configurações - Configurações de desenvolvimento e clique no link " Modificar " em Configuração do servidor .
- Modifique o nome de domínio uploadFile (por exemplo, o endereço de upload https do Leste da China é:
https://up.qiniup.com. Se você não sabe o que escrever no endereço, consulte o apêndice de endereço https)- Se precisar fazer download de um arquivo, você também precisará definir o nome de domínio downloadFile como seu endereço de download do bucket.
- Apenas salve
| Nome do campo | contente |
|---|---|
| solicitar nome de domínio | https://seuServce.com |
| nome de domínio uploadFile | https://up.qiniup.com (preencher de acordo com a área de armazenamento) |
| nome de domínio downloadFile | https://baldkf.bkt.clouddn.com |
Interface de upload de arquivos Qiniu Cloud, os arquivos são transferidos para a interface correspondente e a área de armazenamento corresponde ao endereço HTTPS. Consulte a documentação oficial.
| área de armazenamento | código de área | Endereço HTTPS |
|---|---|---|
| Leste da China | ECN | https://up.qiniup.com |
| Norte da China | NCN | https://up-z1.qiniup.com |
| Sul da China | SCN | https://up-z2.qiniup.com |
| América do Norte | N / D | https://up-na0.qiniup.com |
| Cingapura | ASG | https://up-as0.qiniup.com |
Observação!! Atualmente, o WeChat limita a lista de permissões de nomes de domínio a apenas três modificações por mês.
Suporta temporariamente um método de instalação
Clone o repositório diretamente
git clone https://github.com/gpake/qiniu-wxapp-sdk.git
Os arquivos qiniuUploader.js e qiniuUploader.ts estão no diretório SDK deste projeto.
Recomenda-se consultar o uso da demonstração e começar enviando os eventos vinculados aos botões da UI na página index.wxml da demonstração. Os comentários são muito detalhados.
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' ) ;
}
} ) ;
}
} ) ;
}
} )Use as ferramentas de desenvolvedor da web WeChat para abrir a pasta de demonstração e, em seguida, configure os parâmetros relevantes em index.js para usar a demonstração.
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
}A área de armazenamento do espaço de armazenamento pode ser selecionada ao criar o espaço de armazenamento.
O SDK depende de uptoken , que pode ser definido diretamente, fornecendo o endereço de solicitação Ajax uptokenURL ou fornecendo uma função uptokenFunc que pode retornar 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
} ;Se você quiser saber mais sobre a estratégia de upload do Qiniu, é recomendável ler atentamente a documentação oficial do Qiniu - Upload. A estratégia de upload de Qiniu é especificada no serviço de back-end.
Por exemplo: Qiniuyun java sdk mencionou que variáveis mágicas podem especificar que após o upload de um arquivo, o objeto retornado contém campos: tamanho do arquivo fsize , tipo de arquivo mimeType etc.
Se você quiser saber mais sobre o processamento de imagens do Qiniu, é recomendável ler atentamente a documentação oficial do Qiniu - Processamento de imagens
Quando o exemplo do SDK gera uptotken, o Bucket Name especificado é um espaço público, portanto, os recursos após o upload bem-sucedido podem ser acessados publicamente. Se Bucket Name especificado ao gerar o uptoken for um espaço privado, você precisará realizar processamento adicional no servidor para acessar os recursos carregados. Para obter detalhes, consulte Fazendo download de certificados. Algumas funções de processamento de dados do SDK não são aplicáveis a espaços privados.
Sobre o upload de chaves
Se a chave do arquivo não for especificada durante o upload, o tmp filePath obtido por wx.chooesImage será usado como chave do arquivo. Por exemplo: tmp_xxxxxxx.jpg .
Alternativamente, você pode usar a chave atribuída pelo servidor qiniu (desduplicação global). Por exemplo: Fh6qfpY... (forma recomendada)
O nome do arquivo gerado automaticamente pelo WeChat é mais longo, resultando em um fileURL mais longo. Recomenda-se usar a combinação de {qiniuShouldUseQiniuFileName: true} + "Ao baixar arquivos por meio de fileURL, personalize o nome do download".
Para obter detalhes, consulte shouldUseQiniuFileName no index.js da demonstração e o atributo qiniuShouldUseQiniuFileName no SDK.
Definido para cancelar o upload e pausar o upload:
Consulte a seção de demonstração, data.cancelTask em index.js . O método cancelTask em qiniuUploader.js do SDK.
Além disso, a página de demonstração possui uma demonstração da interface do usuário que interrompe o upload.
Limite os tipos de arquivos enviados:
Suporta arquivos de imagem, arquivos de vídeo e outros arquivos (PDF (.pdf), Word (.doc/.docx), Excel (.xls/.xlsx), PowerPoint (.ppt/.pptx) e outros formatos de arquivo).
A página index.wxml na seção de demonstração possui demonstrações de UI para upload de imagens (do álbum) e upload de arquivos (da sessão do cliente).
Ao baixar arquivos por meio de fileURL, personalize o nome do download
Consulte: Qiniu Cloud "Armazenamento de objetos > Manual do produto > Recursos de download > Configurações de download > Nome de download de recurso personalizado" (https://developer.qiniu.com/kodo/manual/1659/download-setting) Por exemplo: fileUrl é http://xxx.com/keyyyyy , abra o arquivo baixado deste link diretamente no navegador, o nome do arquivo é "keyyyyy".
Caso queira personalizar o nome do arquivo baixado como "myName", você pode baixá-lo através de: http://xxx.com/keyyyyy?attname=myName , ou seja, "fileUrl" + "?attname=" + " nome de arquivo personalizado" Way.
Faça login em https://github.com
Fork [email protected]:gpake/qiniu-wxapp-sdk.git
Crie seu branch de recursos (git checkout -b new-feature)
Confirme suas alterações (git commit -am 'Adicionou alguns recursos ou corrigiu um bug')
Envie seu registro de alteração para o repositório git remoto (novo recurso git push origin)
Em seguida, acesse o site do github e inicie uma solicitação pull na ramificação de novos recursos do repositório remoto git.
LICENÇA GPL V3
