云存储
对应的官方文档：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/银行卡.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)
},
})
},
强力驱动
