qiniu wxapp sdk
1.0.0
WeChat Mini Program SDK พัฒนาขึ้นโดยใช้ Qiniu Cloud API
Qiniu-wxapp-SDK คือการปรับใช้ Qiniu Cloud บนมินิโปรแกรม ฟังก์ชันเครือข่ายอาศัย API ของมินิโปรแกรม WeChat คุณสามารถอัปโหลดไฟล์ไปยัง Qiniu Cloud ได้อย่างง่ายดายในมินิโปรแกรมตาม SDK
Qiniu-wxapp-SDK เป็น SDK ไคลเอนต์และไม่รวมการใช้งานการสร้างโทเค็น ด้วยเหตุผลด้านความปลอดภัย ขอแนะนำให้รับโทเค็นจากเซิร์ฟเวอร์ผ่านเครือข่าย สำหรับรหัสการสร้างเฉพาะ โปรดดูเอกสารประกอบของเซิร์ฟเวอร์ SDK ต่อไปนี้ ปัจจุบันส่วนนี้ไม่รวมอยู่ในการสาธิต SDK
คุณสมบัติอื่น ๆ อยู่ระหว่างการพัฒนา ดังนั้นโปรดคอยติดตาม
ดาวน์โหลด qiniuUploader.js จาก github และนำเข้าโปรเจ็กต์มินิโปรแกรม
ก่อนที่จะใช้ SDK คุณต้องลงทะเบียนบัญชี Qiniu Cloud ก่อนและเข้าสู่ระบบคอนโซลเพื่อรับ AccessKey และ SecretKey ที่ถูกต้อง คุณสามารถอ่านวิธีเข้าถึง Qiniu และกลไกการรักษาความปลอดภัยเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการใช้และจัดการคีย์อย่างถูกต้อง .
SDK อาศัยเซิร์ฟเวอร์ในการออกโทเค็น ซึ่งสามารถทำได้สองวิธีต่อไปนี้:
คุณจำเป็นต้องทราบว่า存储空间ข้อมูล 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 |
|---|---|---|
| จีนตะวันออก | บัญชีเงินฝากอัตโนมัติ | https://up.qiniup.com |
| จีนตอนเหนือ | เอ็นซีเอ็น | https://up-z1.qiniup.com |
| ประเทศจีนตอนใต้ | เอสซีเอ็น | https://up-z2.qiniup.com |
| ทวีปอเมริกาเหนือ | นา | https://up-na0.qiniup.com |
| สิงคโปร์ | เอเอสจี | https://up-as0.qiniup.com |
หมายเหตุ!! ขณะนี้ WeChat จำกัดรายชื่อโดเมนที่อนุญาตไว้เพียง 3 รายการต่อเดือน
รองรับวิธีการติดตั้งวิธีเดียวชั่วคราว
โคลนพื้นที่เก็บข้อมูลโดยตรง
git clone https://github.com/gpake/qiniu-wxapp-sdk.git
ไฟล์ qiniuUploader.js และ qiniuUploader.ts อยู่ในไดเรกทอรี sdk ของโปรเจ็กต์นี้
ขอแนะนำให้อ้างถึงการใช้งานของการสาธิตและเริ่มต้นด้วยการอัปโหลดเหตุการณ์ที่เชื่อมโยงกับปุ่ม UI บนหน้า index.wxml ของการสาธิตที่มีรายละเอียดมาก
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 อาศัย uptoken ซึ่งสามารถตั้งค่าได้โดยตรง โดยระบุที่อยู่คำขอ Ajax uptokenURL หรือโดยจัดเตรียมฟังก์ชัน 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 ที่ระบุเมื่อคุณสร้าง uptoken เป็นพื้นที่ส่วนตัว คุณจะต้องดำเนินการประมวลผลเพิ่มเติมบนเซิร์ฟเวอร์เพื่อเข้าถึงทรัพยากรที่คุณอัปโหลด สำหรับรายละเอียด โปรดดูที่การดาวน์โหลดใบรับรอง ฟังก์ชันการประมวลผลข้อมูล SDK บางอย่างไม่สามารถใช้ได้กับพื้นที่ส่วนตัว
เกี่ยวกับการอัพโหลดคีย์
หากไม่ได้ระบุคีย์ไฟล์เมื่ออัพโหลด tmp filePath ที่ได้รับจาก wx.chooesImage จะถูกนำมาใช้เป็นคีย์ไฟล์ ตัวอย่างเช่น: tmp_xxxxxxx.jpg
หรือคุณสามารถใช้คีย์ที่กำหนดโดยเซิร์ฟเวอร์ qiniu (การขจัดข้อมูลซ้ำซ้อนส่วนกลาง) ตัวอย่างเช่น: Fh6qfpY... (วิธีที่แนะนำ)
ชื่อไฟล์ที่สร้างโดยอัตโนมัติโดย WeChat นั้นยาวกว่า ส่งผลให้ fileURL ยาวขึ้น ขอแนะนำให้ใช้ {qiniuShouldUseQiniuFileName: true} + "เมื่อดาวน์โหลดไฟล์ผ่าน fileURL ให้ปรับแต่งชื่อการดาวน์โหลด"
สำหรับรายละเอียด โปรดดูแอตทริบิวต์ shouldUseQiniuFileName ใน index.js ของการสาธิต และแอตทริบิวต์ qiniuShouldUseQiniuFileName ใน sdk
ตั้งค่าให้ยกเลิกการอัปโหลดและหยุดการอัปโหลดชั่วคราว:
โปรดดูส่วนสาธิต data.cancelTask ใน index.js วิธี cancelTask ใน qiniuUploader.js ของ sdk
นอกจากนี้ หน้าสาธิตยังมีการสาธิต 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=" + " ชื่อไฟล์ที่กำหนดเอง" Way.
เข้าสู่ระบบ https://github.com
ส้อม [email protected]:gpake/qiniu-wxapp-sdk.git
สร้างสาขาคุณลักษณะของคุณ (git checkout -b new-feature)
ยอมรับการเปลี่ยนแปลงของคุณ (git commit -am 'เพิ่มคุณสมบัติบางอย่างหรือแก้ไขข้อบกพร่อง')
ส่งบันทึกการเปลี่ยนแปลงของคุณไปยังที่เก็บ git ระยะไกล (คุณลักษณะใหม่ของ git push origin)
จากนั้นไปที่เว็บไซต์ GitHub และเริ่ม Pull Request ภายใต้สาขาฟีเจอร์ใหม่ของพื้นที่เก็บข้อมูลระยะไกล git
ใบอนุญาต GPL V3
