云存储
首先来看下官方对云存储的介绍:
官方文档:
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage.html
说白了,云存储就是可以用来存储视频,音频,图片,文件的一个云存储空间。如果你的小程序需要用
到视频播放,音频播放,图片展示,文件上传与下载功能,就可以用到我们的云存储了。
使用云存储来存储文件时,文件名的命名有一些规则,建议看一下。
7-1
,云开发控制台管理文件
控制台也可以很方便的管理文件。
7-2
,上传图片到云存储
我们上传图片之前需要先选择图片,所以这里用到一个图片选择的功能
对应的官方文档:
https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.choos
eImage.html
然后调用文件上传的
api
接口即可
官方文档:
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/storag
e/uploadFile/client.uploadFile.html
实现
1
、新建页面
/pages/yuncunchu/yuncunchu
yuncunchu.wxml
2
、
yuncunchu.js
<!--pages/yuncunchu/yuncunchu.wxml-->
<button bindtap="choose">
上传图片
</button>
实验
1
:
“
商品详情页展示图片
// pages/yuncunchu/yuncunchu.js
Page({
choose(){
var that=this
wx.chooseImage({ //
选择图片
count: 1, //
上传数量
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {
console.log(res)
// tempFilePath
可以作为
img
标签的
src
属性显示图片
const tempFilePaths = res.tempFilePaths
that.upload(tempFilePaths[0])
}
})
},
upload(tmpFile){
wx.cloud.uploadFile({ //
上传图片
cloudPath: 'example.png',
filePath: tmpFile, //
文件路径
success: res => {
// get resource ID
console.log("
上传成功
",res)
},
fail: err => {
// handle error
console.log("
上传失败
",err)
}
})
},
})
demo.wxml
demo.wxss
demo.js(
与之前内容一样
)
实验
2
:商品详情页
<!--pages/demo/demo.wxml-->
<view wx:for="{{list}}" >
<image src="{{item.img}}" class="img"></image>
<view>
商品名:
{{item.name}},
价格
:{{item.price}}</view>
</view>
/* pages/demo/demo.wxss */
.img{
width: 200rpx;
height:200rpx;
}
Page({
onLoad(){
wx.cloud.database().collection("goods")
.get()
.then(res =>{
console.log("
商品列表请求成功
",res)
this.setData({
list:res.data
})
})
.catch(res=>{
console.log("
商品列表请求失败
",res)
})
},
})
只需要修改一个地方
demo1-1.js
上传视频
https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html
yuncunchu.wxml
yuncunchu.js
<view>
商品名:
{{good.name}},
价格
:{{good.price}}</view>
<image src="{{good.img}}"></image>
<button bindtap="chooseView">
上传视频
</button>
chooseView(){
var that=this
wx.chooseVideo({
sourceType: ['album','camera'],
maxDuration: 60,
camera: 'back',
success(res) {
console.log(res.tempFilePath)
that.uploadView(res.tempFilePath)
}
})
},
uploadView(tmpFile){
wx.cloud.uploadFile({
cloudPath: 'ab.mp4',
filePath: tmpFile, //
文件路径
success: res => {
代码去冗余
// get resource ID
console.log("
上传成功
",res)
},
fail: err => {
// handle error
console.log("
上传失败
",err)
}
})
},
Page({
choose(){
var that=this
wx.chooseImage({ //
选择图片
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {
// tempFilePath
可以作为
img
标签的
src
属性显示图片
const tempFilePaths = res.tempFilePaths
console.log(tempFilePaths)
that.upload(tempFilePaths[0],'aa.png') //
修改
}
})
},
upload(tmpFile,updFile){ //
修改
wx.cloud.uploadFile({
cloudPath: updFile, //
修改
filePath: tmpFile, //
文件路径
success: res => {
// get resource ID
console.log("
上传成功
",res)
},
fail: err => {
// handle error
console.log("
上传失败
",err)
}
})
},
chooseView(){
var that=this
wx.chooseVideo({
sourceType: ['album','camera'],
maxDuration: 60,
camera: 'back',
success(res) {
console.log(res.tempFilePath)
that.upload(res.tempFilePath,'aa.mp4') //
修改
}
})
},
})
上传文件
https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseMessageFile.ht
ml
下载文件
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/storage/downloa
dFile/client.downloadFile.html
.wxml
.wxss
.js
<button bindtap="chooseFile">
选择文件
</button>
chooseFile(){
var that=this
wx.chooseMessageFile({
count: 1,
type: 'all',
success (res) {
// tempFilePath
可以作为
img
标签的
src
属性显示图片
const tempFilePaths = res.tempFiles
console.log(tempFilePaths[0])
that.upload(tempFilePaths[0].path,tempFilePaths[0].name)
}
})
},
<view>
请输入下载链接
</view>
<input class="lianjie" bindinput="getContent"></input>
<button bindtap="downLoad">
下载
</button>
.lianjie{
border: 1rpx solid black;
}
getContent(e){
console.log(e.detail.value)
this.setData({
fileID:e.detail.value
})
},
downLoad(){
var fileID
fileID=this.data.fileID
console.log("
下载链接为:
",fileID)
wx.cloud.downloadFile({
fileID: fileID,
下载并打开
word excel ppt
https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html
实例
一、使用云函数、云存储识别身份证、银行卡信息
功能演示
原理解析
success: res => {
// get temp file path
console.log("
下载成功
",res)
},
fail: err => {
// handle error
console.log("
下载失败
",res)
}
})
},
downLoad(){
var fileID
fileID=this.data.fileID
console.log("
下载链接为:
",fileID)
wx.cloud.downloadFile({
fileID: fileID,
success: res => {
// get temp file path
console.log("
下载成功
",res)
const filePath = res.tempFilePath //
新增加
wx.openDocument({ //
新增加
filePath: filePath, //
新增加
success: function (res) { //
新增加
console.log('
打开文档成功
') //
新增加
}
})
},
1
、购买
OCR
识别服务
链接:
https://fuwu.weixin.qq.com/service/detail/000ce4cec24ca026d37900ed551415
购买成功截图:
注意
2
、配置云开发环境
识别银行卡
3
、创建云函数
card2
用于识别的函数链接:
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/ocr/ocr.bankcard.htm
l
card2/index.js
const cloud = require('wx-server-sdk')
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV,
})
exports.main = async (event, context) => {
try {
const result = await cloud.openapi.ocr.bankcard({ //
识别银行卡
"type": 'photo',
"imgUrl": event.imgCard2
})
return result
} catch (err) {
return err
创建页面
.wxml
.js
识别身份证
icard1/index.js
}
}
<!--pages/shibie/shibie.wxml-->
<button bindtap="shibie2">
识别银行卡
</button>
<text>
银行卡号是:
{{number}}</text>
shibie2(){ //
识别银行卡
var that=this
wx.cloud.callFunction({
name:"card2",
data:{
imgCard2:"https://7975-yunjisaun-5gscklsyde3525d6-
1305769838.tcb.qcloud.la/%E9%93%B6%E8%A1%8C%E5%8D%A1.jpg?
sign=334b0a938eddcc7a6f935cd5c1e0463a&t=1623922340"
},
success(res){
console.log("
识别成功
",res)
that.setData({
number:res.result.number
})
},
fail(res){
console.log("
识别失败
",res)
},
})
},
const cloud = require('wx-server-sdk')
cloud.init({
})
exports.main = async (event, context) => {
try {
const result = await cloud.openapi.ocr.idcard({
"type": 'photo',
"imgUrl": event.imgCard
})
console.log(result)
return result
} catch (err) {
return err
}
}
.wxml
.js
二、上传图片后识别
1
、选择图片
.js
<button bindtap="shibie">
识别身份证
</button>
<view>
姓名是:
{{name}}</view>
<view>
身份证号是:
{{id}}</view>
<view>
性别是:
{{gender}}</view>
shibie(){ //
识别身份证
var that=this
wx.cloud.callFunction({
name:"card1",
data:{
imgCard:"https://7975-yunjisaun-5gscklsyde3525d6-
1305769838.tcb.qcloud.la/2.jpg?
sign=10f4a855f58ce6dc69b1eebc71e5b060&t=1623922187"
},
success(res){
console.log("
识别成功
",res)
that.setData({
name:res.result.name,
id:res.result.id,
gender:res.result.gender
})
},
fail(res){
console.log("
识别失败
",res)
},
})
},
shibie(){
var that=this
wx.chooseImage({ //
选择图片
count: 1, //
上传数量
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {
console.log(res)
// tempFilePath
可以作为
img
标签的
src
属性显示图片
const tempFilePaths = res.tempFilePaths
that.upload(tempFilePaths[0])
}
})
},
2
、上传图片
3
、转换图片链接路径
4
、调用云函数识别
upload(tmpFile){
var that=this
wx.cloud.uploadFile({ //
上传图片
cloudPath: 'example.png',
filePath: tmpFile, //
文件路径
success: res => {
console.log("
上传成功
",res.fileID)
that.getUrl(res.fileID)
},
fail: err => {
console.log("
上传失败
",err)
}
})
},
getUrl(fileid){
var that=this
wx.cloud.getTempFileURL({
fileList: [{
fileID: fileid,
}]
}).then(res => {
console.log("
获取
URL
成功
",res.fileList[0].tempFileURL)
var httpUrl=res.fileList[0].tempFileURL
that.getID(httpUrl)
}).catch(error => {
console.log("
获取
url
失败
")
})
},
getID(tmp){
var that=this
wx.cloud.callFunction({
name:"card1",
data:{
imgCard:tmp
},
success(res){
console.log("
识别成功
",res.result) //name id gender
that.setData({
name:res.result.name,
id:res.result.id,
gender:res.result.gender
})
},
fail(res){
console.log("
识别失败
",res)
},
})
},
课后作业:
自己完成上传、识别银行卡、显示卡号功能。