获取url--也就是在云存储中点击详情就能复制到的那个url，要把他存到数据库中才能通过代码操作，否则只能手动复制
下载地址这里就是url
现在先把demo改成自动上传 之前在上传成功回调方法里没有打印参数，把这个方法的参数打印出来，实际就有url
<template>
<view class="home">
<uni-file-picker
v-model="imageValue"
mode="grid"
limit="3"
@progress="progress"
@success="success"
@fail="fail"
@select="select"
ref="files"
/>
</view>
</template>
<script>
export default {
data() {
return {
// 这是一个在组件中写好的双向绑定的变量
imageValue: []
}
},
onLoad() {
},
methods: {
// 获取上传状态
select(e) {
console.log('选择文件：', e)
},
// 获取上传进度
progress(e) {
console.log('上传进度：', e)
},
// 上传成功
success(e) {
console.log('上传成功',e)
},
// 上传失败
fail(e) {
console.log('上传失败：', e)
}
}
}
</script>
<style lang="scss" scoped;>
</style>
在页面中上传一张图，上传成功回调函数里的tempFilePaths参数里就是url
mp-434fcb27-c15c-4386-8fb4-df14ff635e79.cdn.bspapp.com/cloudstorag…
另一个属性tempFiles包含更完整的内容，size是文件大小
拿到url把他存到刷剧数据中，在渲染数据时就可以使用了 mp-434fcb27-c15c-4386-8fb4-df14ff635e79.cdn.bspapp.com/cloudstorag…
在数据库中创建一个数据表picdata 接下来在页面的data中定义一个变量fileUrl保存数据
然后新建一个输入框获取用户输入的标题，保存在data中，新建变量title 一个提交按钮，当用户点击按钮后，将标题和上传文件一起保存到数据库
<template>
<view class="home">
<input type="text" v-model="title" placeholder="请输入标题"></input>
<uni-file-picker
v-model="imageValue"
mode="grid"
@progress="progress"
@success="success"
@fail="fail"
@select="select"
ref="files"
/>
<button @click="onSubmit" type="primary">确认发布</button>
</view>
</template>
<script>
export default {
data() {
return {
title:"",
// 保存上传到云存储的url
filesUrl:[],
// 这是一个在组件中写好的双向绑定的变量
imageValue: []
}
},
onLoad() {
},
methods: {
// 获取上传状态
select(e) {
console.log('选择文件：', e)
},
// 获取上传进度
progress(e) {
console.log('上传进度：', e)
},
// 上传成功
success(e) {
console.log('上传成功',e)
this.filesUrl = e.tempFilePaths
},
// 上传失败
fail(e) {
console.log('上传失败：', e)
}
}
}
</script>
创建云函数
要把数据保存到云数据库，就先创建云函数demo2_art_add_row
const db=uniCloud.database()
exports.main = async (event, context) => {
let {title, filesUrl} = event
return await db.collection("picdata").add({
title,
filesUrl
})
};
云函数创建完成后，就是在前端页面的按钮点击事件调用云函数，传递参数给云函数并获取返回值
<template>
<view class="home">
<input type="text" v-model="title" placeholder="请输入标题"></input>
<uni-file-picker
v-model="imageValue"
mode="grid"
@progress="progress"
@success="success"
@fail="fail"
@select="select"
ref="files"
/>
<button @click="onSubmit" type="primary">确认发布</button>
</view>
</template>
<script>
export default {
data() {
return {
title:"",
// 保存上传到云存储的url
filesUrl:[],
// 这是一个在组件中写好的双向绑定的变量
imageValue: []
}
},
onLoad() {
},
methods: {
//点击发布
onSubmit(){
uniCloud.callFunction({
name:"demo2_art_add_row",
data:{
title: this.title,
filesUrl: this.filesUrl
}
}).then(res=>{
console.log(res);
})
},
// 获取上传状态
select(e) {
console.log('选择文件：', e)
},
// 获取上传进度
progress(e) {
console.log('上传进度：', e)
},
// 上传成功
success(e) {
console.log('上传成功',e)
this.filesUrl = e.tempFilePaths
},
// 上传失败
fail(e) {
console.log('上传失败：', e)
}
}
}
</script>
<style lang="scss" scoped>
</style>
数据库中已经有这个图片的地址和用户输入的title了。
控制台中返回值是数据库返回的id
