修改页面改造
先写一个上传组件，并把imageValue变量双向绑定到data中，用来将添加的图片展示在页面中
<template>
<view class="edit">
<form @submit="onSubmit">
<view class="item">
<!-- 标题输入框 -->
<input v-model="formValue.title" type="text" name="title" placeholder="请输入标题"></input>
</view>
<view class="item">
<!-- 作者输入框 -->
<input v-model="formValue.author" type="text" name="author" placeholder="请输入作者"></input>
</view>
<view class="item">
<!-- 多行输入框 -->
<textarea v-model="formValue.content" name="content" placeholder="请输入内容"></textarea>
</view>
<view class="item">
<uni-file-picker
v-model="imageValue"
fileMediatype="image"
mode="grid"
@success="uploadSuccess"
/>
</view>
<view class="item">
<button form-type="reset">重置</button>
<!-- 对按钮进行双向绑定，这样用户每次输入值才能动态的调用判断方法 判断按钮 -->
<button form-type="submit" type="primary" :disabled="inDisabled(formValue)">提交</button>
</view>
</form>
</view>
</template>
<script>
// 因为要通过详情页传过来的id获取数据,所以要定义一个全局id
let id;
export default {
data() {
return {
imageValue:[],
formValue:{
title:"",
author:"",
content:""
}
};
},
根据文档，要想把图片回显到页面，必须要有url和后缀、文件名
这里原本的url是一个数组形式，通过map给他改造成文档需要的数组包含对象的结构，但是文档要求三个必填项，这里只有一个url也能回显，不知道什么原因
还有一个问题是，这里代码中写的是通过map遍历值成为url:item，按理说就一个url:"图片地址"的键值对，另外一个path的键值对不知道哪里来的
<template>
<view class="edit">
<form @submit="onSubmit">
<view class="item">
<!-- 标题输入框 -->
<input v-model="formValue.title" type="text" name="title" placeholder="请输入标题"></input>
</view>
<view class="item">
<!-- 作者输入框 -->
<input v-model="formValue.author" type="text" name="author" placeholder="请输入作者"></input>
</view>
<view class="item">
<!-- 多行输入框 -->
<textarea v-model="formValue.content" name="content" placeholder="请输入内容"></textarea>
</view>
<view class="item">
<uni-file-picker
v-model="imageValue"
fileMediatype="image"
mode="grid"
@success="uploadSuccess"
/>
</view>
<view class="item">
<button form-type="reset">重置</button>
<!-- 对按钮进行双向绑定，这样用户每次输入值才能动态的调用判断方法 判断按钮 -->
<button form-type="submit" type="primary" :disabled="inDisabled(formValue)">提交</button>
</view>
</form>
</view>
</template>
<script>
// 因为要通过详情页传过来的id获取数据,所以要定义一个全局id
let id;
export default {
data() {
return {
imageValue:[],
formValue:{
title:"",
author:"",
content:""
}
};
},
onLoad(e) {
// 把获取到的id赋值给全局id，这样整个页面哪里都能直接使用id了
id=e.id
// 调用获取新闻详情的方法,一进入页面就获取数据
this.getDetail()
},
methods:{
// 获取要修改新闻的详情
getDetail(){
uniCloud.callFunction({
name:"art_get_row",
data:{
// id:id
id
}
}).then(res=>{
this.formValue = res.result.data[0]
console.log(this.formValue);
// 如果没有图片,这里结束代码，有图片才执行后续的代码
// 不写这一句的话。如果没有图片的文章页面会报错
if(!this.formValue.picurls) return;
// 将图片展示在页面中，获取回来的值formValue中是有图片url的
// 要将获取到的图片回显到页面,根据文档,还需要后缀名和文件名
let urls=this.formValue.picurls.map(item=>{
return {url:item}
})
console.log(urls);
// 所以将他赋值给imageValue,绑定到上传组件,就能将图片显示在页面
this.imageValue = urls;
})
},
// 判断按钮的是否禁用
// 这里是通过obj接收值所以不用写this,不传值也可以,写上this.一样
inDisabled(obj){
// 循环判断key的三个值是否为空,不为空就返回true,使按钮变为可用状态
for(let key in obj){
// obj[key]和obj.key一样的效果，打印出来的值就是用户输入的值
// console.log(obj[key]);
if(!obj[key]){
return true
}
}
},
// 点击提交触发此方法
onSubmit(e){
// 获取到用户输入并赋值
// 这一句不用了,因为上面formValue是双向绑定的
// 可以直接拿到用户修改的值
// 在下面直接把formValue放在data中传递到后端即可
// let detail=e.detail.value
// 接收云函数传过来的值
uniCloud.callFunction({
name:"art_update_row",
// 将获取到的用户输入传递到服务器
data:{
// detail:detail
detail:this.formValue
}
}).then(res=>{
uni.showToast({
title:"修改成功"
})
setTimeout(()=>{
uni.navigateBack()
},800)
})
}
}
}
</script>
接下来是写上传成功方法，然后把图片url赋值到data中
data() {
return {
// 上传成功的图片url
picurls:[],
imageValue:[],
formValue:{
title:"",
author:"",
content:""
}
};
},
// 图片上传成功，把url保存到data中
uploadSuccess(e){
this.picurls = e.tempFilePaths
},
然后在调用云函数的方法中，传递url，最后在云函数中将url保存到数据库
// 点击提交触发此方法
onSubmit(e){
// 获取到用户输入并赋值
// 这一句不用了,因为上面formValue是双向绑定的
// 可以直接拿到用户修改的值
// 在下面直接把formValue放在data中传递到后端即可
// let detail=e.detail.value
// 接收云函数传过来的值
uniCloud.callFunction({
name:"art_update_row",
// 将获取到的用户输入传递到服务器
data:{
// detail:detail
detail:this.formValue,
picurls:this.picurls
}
}).then(res=>{
uni.showToast({
title:"修改成功"
})
setTimeout(()=>{
uni.navigateBack()
},800)
})
}
}
然后在云函数中接收值并保存到数据库
const db=uniCloud.database()
exports.main = async (event, context) => {
let {detail,picurls} = event;
return await db.collection("article").doc(detail._id).update({
title: detail.title,
author: detail.author,
content: detail.content,
picurls:picurls
})
};
数据库里有值了
下一节将图渲染到页面中
