云存储处处

  • 时间:
  • 来源:互联网
  • 文章标签:
云存储
首先来看下官方对云存储的介绍:
官方文档: 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)
},
})
}, 课后作业:
自己完成上传、识别银行卡、显示卡号功能。

本文链接http://www.taodudu.cc/news/show-2483352.html