Create a small program project, I chose not to use cloud development (I will add related cloud development configuration later)
Related configuration
app.js configuration initialization
// app.js
App({
onLaunch() {
wx.cloud.init({
env: "自己的env"
})
}
})
Get your own env
Cloud development creates a new database list
wxml page
<input placeholder="输入姓名" bindinput="addName"></input>
<input placeholder="输入性别" bindinput="addSex"></input>
<button bindtap="getData">查询</button>
<button bindtap="addData">增加</button>
<button bindtap="upload">上传图片</button>
js page
// index.js
// 获取应用实例
const DB = wx.cloud.database().collection("list")
let name = ""
let sex = ""
let url = ""
Page({
getData() {
DB.get({
success(res) {
console.log(res)
}
})
},
// 获取输入框中的姓名
addName(event) {
console.log(event.detail.value)
name = event.detail.value
},
// 获取输入框中的性别
addSex(event) {
console.log(event.detail.value)
sex = event.detail.value
},
// 获取图片上传后的url路径
addImagePath(fileId) {
console.log(fileId)
wx.cloud.getTempFileURL({
fileList: [fileId],
success: res => {
url = res.fileList[0].tempFileURL
},
fail: console.error
})
},
addData() {
DB.add({
data: {
name: name,
sex : sex,
url: url
},
success(res) {
console.log("添加成功", res)
},
fail() {
console.log("添加失败", res)
}
})
},
//上传文件
upload(){
let that = this;
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
console.log("成功",res);
that.uploadImage(res.tempFilePaths[0]);
}
})
},
// 上传到云开发的存储中
uploadImage(fileURL) {
var that = this
wx.cloud.uploadFile({
cloudPath:new Date().getTime()+'.png', // 上传至云端的路径
filePath: fileURL, // 小程序临时文件路径
success: res => {
//获取图片的http路径
that.addImagePath(res.fileID)
},
fail: console.error
})
}
})
Page screenshot
Add page
added successfully
