云存储处处

云存储

首先来看下官方对云存储的介绍：

官方文档： 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)

},

})

}, 课后作业：

自己完成上传、识别银行卡、显示卡号功能。