unicloud初级入门-文章管理带图片上传

最新推荐文章于 2024-06-01 21:19:47 发布
最新推荐文章于 2024-06-01 21:19:47 发布
阅读量472 收藏 7
点赞数 7
分类专栏： uniapp 文章标签： 数据库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/modern358/article/details/135089991
版权

这个和前面发的Unicloud初级入门-新闻小案例，是一体的。只不过这个带图片上传功能，更完整些。

我就不啰嗦了，直接把代码全部贴出来。

项目截图

数据库

uniapp代码

artAddNews

'use strict';
const db = uniCloud.database();
exports.main = async (event, context) => {
	let {news,picUrls}  = event;
	let res = await db.collection("article").add({
		posttime: Date.now(),
		...news,
		picUrls
	});
	return res;
};

artDelete

'use strict';
const db = uniCloud.database();
const dbCmd = db.command;
exports.main = async (event, context) => {
	//解析id
	let {id} = event;
	//根据条件删除
	let res = await db.collection("article").where({
		_id : dbCmd.eq(id)
	}).remove();
	//返回
	return res;
};

artGetAll

'use strict';
const db = uniCloud.database();
exports.main = async (event, context) => {
	//翻页需要过滤的的量，默认首次是0
	let {skip = 0 } = event;
	let res = await db.collection("article")
		.limit(8) //一次取6条
		.skip(skip) //过滤多少条，把前面已经展示的内容过滤掉
		.orderBy("posttime","desc") //按时间倒序排序
		.get(); 
	return res;
};

artGetById

'use strict';
const db = uniCloud.database();
const dbCmd = db.command;
exports.main = async (event, context) => {
	let {id} = event;
	//根据id获取新闻详情
	//let res = await db.collection("article").doc(id).get();
	//根据id获取新闻详情
	let res = await db.collection("article").where({
		_id : dbCmd.eq(id)
	}).get();
	
	return res;
};

artUpdateNews

'use strict';
const db = uniCloud.database();
const dbCmd = db.command;
exports.main = async (event, context) => {
	let {news,picUrls} = event;
	let res = await db.collection("article").where({
		_id: dbCmd.eq(news._id)
	}).update({
		title: news.title,
		author: news.author,
		content: news.content,
		picUrls: picUrls
	});
	
	return res;
};

pages add add.vue

<template>
	<view class="add">
		<form @submit="onsubmit">
			<view class="item">
				<input type="text" name="title" placeholder="请输入标题" v-model="formValue.title" />
			</view>
			<view class="item">
				<input type="text" name="author" placeholder="请输入作者" v-model="formValue.author" />
			</view>
			<view class="item">
				<textarea value="" placeholder="请输入内容" name="content" v-model="formValue.content"/>
			</view>
			<view class="item">
				<uni-file-picker 
					v-model="imageValue" 
					file-mediatype="image"
					mode="grid" 
					:limit="3"
					title="可以上传3张图片"
					file-extname="png,jpg"
					@success="uploadSuccess" 
				/>
			</view>
			<view class="item">
				<button type="default" form-type="reset">重置</button>
				<button type="primary" form-type="submit" :disabled="isDisabled(formValue)">提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageValue:[],
				formValue:{
					title: '',
					author:'',
					content:''
				},
				picUrls:[]
			}
		},
		methods: {
			//图片上传成功
			uploadSuccess(e){
				console.log(e)
				//this.picUrls.push(...e.tempFilePaths);
			},
			//判断按钮是否禁用
			isDisabled(obj){
				let disabled = Object.keys(obj).some((key,value)=>{
					//此项没有填写值时
					return obj[key] == ''
 				})
				
				return disabled;
			},
			onsubmit(e){
				let obj = e.detail.value;
				this.picUrls = this.imageValue.map(item=>{
					return item.url
				});
				uniCloud.callFunction({
					name:"artAddNews",
					data:{
						news: obj,
						picUrls: this.picUrls
					}
				}).then(res=>{
					console.log(res);
					uni.showToast({
						title:"发布成功",
						icon:"success",
						mask:true,
						duration:1000
					});
					setTimeout(()=>{
						uni.reLaunch({
							url:'/pages/index/index'
						})
					},1200);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.add{
	padding: 30rpx;
	.item{
		padding-bottom: 20rpx;
		input,textarea{
			border: 1px solid #eee;
			height: 80rpx;
			padding: 0 20rpx;
		}
		
		textarea{
			height: 200rpx;
			width: 100%;
			box-sizing: border-box;
		}
		
		button{
			margin-bottom: 20rpx;
		}
	}
}
</style>

pages detail detail.vue

<template>
	<view class="detail">
		<view v-if="loading">
			<view class="title">
				{{detailData.title}}
			</view>
			<view class="info">
				<text class="txt">作者：{{detailData.author}}</text>
				<text>时间：</text>
				<uni-dateformat 
					:date="detailData.posttime" 
					format="yyyy年MM月dd hh:mm:ss"
					class="txt"/>
			</view>
			<view class="content">
				<rich-text :nodes="detailData.content"></rich-text>
			</view>
			
			<view class="picUrls" v-if="detailData.picUrls && detailData.picUrls.length">
				<image :src="item" mode="widthFix" v-for="(item,index) in detailData.picUrls" :key="index"></image>
			</view>
			
			<view class="btnGroup">
				<button type="default" size="mini" class="btn" @tap="onUpdate">
					<uni-icons type="compose" size="15"></uni-icons>
					修改
				</button>
				<button type="warn" size="mini" class="btn" @tap="onDelete">
					<uni-icons type="trash" size="15" color="#fff"></uni-icons>
					删除
				</button>
			</view>
		</view>
		<view v-else>
			<uni-load-more status="loading"></uni-load-more>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:null,
				detailData:{},
				loading: false
			};
		},
		onLoad(options) {
			this.id = options.id;
		},
		onShow() {
			this.getData();
		},
		methods:{
			//
			getData(){
				uniCloud.callFunction({
					name:"artGetById",
					data:{
						id: this.id
					}
				}).then(res=>{
					console.log(res)
					this.detailData = res.result.data[0];
					//加载完成，关闭提示
					this.loading = true;
					//修改导航栏的标题
					uni.setNavigationBarTitle({
						title: this.detailData.title
					});
				}).catch(()=>{
					uni.showToast({
						title:'参数有误',
						icon:'none'
					});
					setTimeout(()=>{
						uni.reLaunch({
							url:'/pages/index/index'
						})
					},800);
					
				})
			},
			//修改
			onUpdate(){
				uni.navigateTo({
					url:'/pages/edit/edit?id=' + this.id
				});
			},
			//调用云函数
			remove(){
				uniCloud.callFunction({
					name:"artDelete",
					data:{
						id: this.id
					}
				}).then(res=>{
					console.log(res);
					//
					uni.showToast({
						title:'删除成功',
						icon:'success',
						mask:true,
						duration:1000
					});
					//等待图标提示完毕，再跳转
					setTimeout(()=>{
						uni.reLaunch({
							url:'/pages/index/index'
						});
					},1500)
				})
			},
			//删除
			onDelete(){
				uni.showModal({
					title:'删除提示',
					content:'您确定要删除此篇文章吗?',
					confirmText:'删除',
					success: (res) => {
						//确认删除
						if(res.confirm){
							this.remove();
						}else{
							//不删除
							uni.showToast({
								title:'已取消删除',
								icon:'none'
							});
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail{
		padding: 30rpx;
		.title{
			font-size: 50rpx;
			color: #333;
			text-align: justify;
			line-height: 1.4em;
		}
		
		.info{
			font-size: 30rpx;
			color: #666;
			padding: 30rpx 0 60rpx;
			.txt{
				padding-right: 30rpx;
			}
		}
		
		.content{
			font-size: 36rpx;
			line-height: 1.7em;
			color: #333;
		}
		
		.picUrls{
			padding-top: 50rpx;
			image{
				width: 100%;
				display: block;
				margin-bottom: 30rpx;
			}
		}
		
		.btnGroup{
			margin-top: 50rpx;
			padding: 50rpx 0;
			border-top: 1px solid #ccc;
			.btn{
				margin-right: 30rpx;
			}
		}
	}
</style>

pages edit edit.vue

<template>
	<view class="add">
		<form @submit="onsubmit">
			<view class="item">
				<input type="text" name="title" placeholder="请输入标题" v-model="formValue.title" />
			</view>
			<view class="item">
				<input type="text" name="author" placeholder="请输入作者" v-model="formValue.author" />
			</view>
			<view class="item">
				<textarea value="" placeholder="请输入内容" name="content" v-model="formValue.content"/>
			</view>
			<view class="item">
				<uni-file-picker 
					v-model="imageValue" 
					file-mediatype="image"
					mode="grid" 
					:limit="3"
					title="可以上传3张图片"
					file-extname="png,jpg"
					@success="uploadSuccess" 
				/>
			</view>
			<view class="item">
				<button type="default" form-type="reset">重置</button>
				<button type="primary" form-type="submit" :disabled="isDisabled(formValue)">提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:null,
				formValue:{
					title: '',
					author:'',
					content:''
				},
				imageValue:[],
				picUrls:[]
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getDetail();
		},
		methods: {
			//图片上传成功
			uploadSuccess(e){
				console.log(e)
				//this.picUrls.push(...e.tempFilePaths);
			},
			getDetail(){
				uniCloud.callFunction({
					name:"artGetById",
					data:{
						id: this.id
					}
				}).then(res=>{
					console.log(res)
					this.formValue = res.result.data[0];
					//如果本就没有图片，不做回显
					if(!this.formValue.picUrls) return;
					this.picUrls = this.formValue.picUrls;
					let urls = this.formValue.picUrls.map(item =>{
						return {
							url: item
						}
					})
					console.log("urls",urls)
					this.imageValue = urls;
				});
			},
			//判断按钮是否禁用
			isDisabled(obj){
				let disabled = Object.keys(obj).some((key,value)=>{
					//此项没有填写值时
					return obj[key] == ''
				})
				
				return disabled;
			},
			onsubmit(){
				//从控件中取，
				this.picUrls = this.imageValue.map(item=>{
					return item.url
				});
				uniCloud.callFunction({
					name:"artUpdateNews",
					data:{
						news: this.formValue,
						picUrls: this.picUrls
					}
				}).then(res=>{
					console.log(res);
					uni.showToast({
						title:"更新成功",
						icon:"success",
						mask:true,
						duration:1000
					});
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						});
					},1200);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.add{
	padding: 30rpx;
	.item{
		padding-bottom: 20rpx;
		input,textarea{
			border: 1px solid #eee;
			height: 80rpx;
			padding: 0 20rpx;
		}
		
		textarea{
			height: 200rpx;
			width: 100%;
			box-sizing: border-box;
		}
		
		button{
			margin-bottom: 20rpx;
		}
	}
}
</style>

pages index index.vue

<template>
	<view class="home">
		<view class="content">
			<view class="item" v-for="item in newsList" :key="item._id" @tap="goDetail(item)">
				<view class="txt">
					<view class="title">
						{{item.title}}
					</view>
					<view class="info">
						<text class="t">{{item.author}}</text>
						<uni-dateformat
							:date="item.posttime"
							:threshold="[60000, 7200000]"
							format="MM-dd">
							</uni-dateformat>
					</view>
				</view>
				<view class="pic">
					<image :src="item.picUrls[0]" mode="aspectFit" v-if="item.picUrls && item.picUrls.length"></image>
					<image src="../../static/logo.png" mode="aspectFit" v-else></image>
				</view>
			</view>
		</view>
		
		<view class="goAdd" @tap="goAdd">
			<uni-icons type="plusempty" size="30" color="#fff"></uni-icons>
		</view>
		
		<view v-if="isEnd">
			<uni-load-more status="noMore"></uni-load-more>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newsList:[],
				isEnd: false
			}
		},
		onLoad() {
			//重置
			this.isEnd = false;
			//获取数据
			this.getData();
		},
		//触底加载
		onReachBottom() {
			this.getData();
		},
		//下拉刷新
		onPullDownRefresh(){
			//重置状态
			this.isEnd = false;
			this.newsList = [];
			this.getData();
		},
		methods: {
			//前往详情页
			goDetail(obj){
				//
				uni.navigateTo({
					url:"/pages/detail/detail?id=" + obj._id
				});
			},
			getData(){
				uniCloud.callFunction({
					name:"artGetAll",
					data:{
						//过滤的量就是，已经获取的数组长度
						skip: this.newsList.length
					}
				}).then(res=>{
					console.log(res)
					//新获取的数据，解析后，追加到数组中
					this.newsList.push(...res.result.data);
					//下拉刷新停止
					uni.stopPullDownRefresh();
					//判断是否到底了
					if(res.result.affectedDocs <= 0){
						this.isEnd = true;
					}
				})
				
			},
			goAdd(){
				uni.navigateTo({
					url:'/pages/add/add'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home{
		.content{
			padding: 30rpx;
			
			.item{
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #eee;
				.txt{
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding-right: 20rpx;
					.title{
						font-size: 40rpx;
						color: #333;
						text-align: justify;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					
					.info{
						font-size: 28rpx;
						color: #888;
						.t{
							padding-right: 20rpx;
						}
					}
				}
				
				.pic{
					width: 260rpx;
					height: 160rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		
		.goAdd{
			width: 120rpx;
			height: 120rpx;
			background-color: #5B89FE;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			position: fixed;
			right: 30rpx;
			bottom: 60rpx;
		}
	}
</style>

app.vue

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
	:root{
		box-sizing: border-box;
	}
</style>

pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "文章列表",
				"enablePullDownRefresh": true
			}
		},
		{
			"path" : "pages/add/add",
			"style" : 
			{
				"navigationBarTitleText" : "新增文章",
				"enablePullDownRefresh" : false
			}
		},
		{
			"path" : "pages/edit/edit",
			"style" : 
			{
				"navigationBarTitleText" : "修改文章",
				"enablePullDownRefresh" : false
			}
		},
		{
			"path" : "pages/detail/detail",
			"style" : 
			{
				"navigationBarTitleText" : "新闻详情",
				"enablePullDownRefresh" : false
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "文章管理系统",
		"navigationBarBackgroundColor": "#2B9939",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

图示

首页

 详情页

 修改

虾米大王
关注
专栏目录
开箱即用VK云函数路由模式uniCloud开发框架 - 已集成uni-id
05-28
主要功能 以及 对开发者的价值 1、实现云函数路由模式（同时支持对云对象的路由） 1.1、路由模式不使用任何第三方包，兼容性强，运行稳定 1.2、减少云函数数量，云函数有个数限制（用一个云函数即可实现多个云函数...
【开箱即用】VK云函数路由模式uniCloud开发框架 - 已集成uni-id
10-02
【开箱即用的VK云函数路由模式与uniCloud开发框架】 在当今的移动应用开发领域，云服务已经成为不可或缺的一部分，特别是在小程序和H5应用中。"VK云函数路由模式uniCloud开发框架"是一个专为开发者设计的高效、便捷...
10.6 上传图片｜uni-app 项目实战（个人信息页功能模块）｜uni-app & uniCloud 从零入门开发《IT技术资讯类跨端应用》项目实战
08-31
10.6_上传图片｜uni-app_项目实战（个人信息页功能模块）｜uni-app_&_uniCloud_从零入门开发《IT技术
unicloud中上传图片
06-26 3257
addImage/index.js: 'use strict'; const db = uniCloud.database() exports.main = async (event, context) => { const collection = db.collection('tableImages') //云数据库里的表名 ，记录上传图片到云存储后返回的fileID const res = await collection.add(event) //event为客户端上传的参数...
[Uniapp开发日记]上传图片( 超级详细、云开发 、简单易懂 、CV即用 )
m0_69551472的博客
03-14 1898
有粉丝让我更新一个云储存版本, 马上安排
微信小程序上传图片到unicloud云存储
qq_15644801的博客
06-18 733
微信小程序、unicloud、云存储
uniapp uniCloud 云开发上传图片与查看图片
热门推荐
weixin_38946164的博客
12-04 1万+
效果图： 1. 开通uniCloud 地址：https://unicloud.dcloud.net.cn 选择阿里云，需要实名认证。 2. 在uniCloud 的 web控制台创建服务空间，然后在云数据库新建数据表。 3. 在HBuilder X 新建项目。 关联创建好的云服务空间 4. 新建云函数 addImage 云函数（把数据写入表） 'use strict'; const db = uniCloud.database() exports.main = async (event, conte
基于uniCloud与uni-app的admin管理项目模板
02-25
admin管理项目模板是uniCloud与uni-app结合使用的典型应用场景，主要用于企业内部或面向合作伙伴的后台管理系统建设。这个模板通常包含登录注册、权限管理、数据展示、操作记录、系统设置等多个功能模块，以满足不同...
基于workerman和unicloud的uni-nvue-chat设计源码
最新发布
09-28
该项目是一款基于Workerman和UniCloud技术的uni-nvue-chat即时通讯应用源码，总计包含121个文件，涵盖了33个Vue组件、26个PNG图像、20个nvue页面、19个JavaScript脚本、7个JSON配置文件以及其他类型文件。...
基于Uniapp + UniCloud + uview-ui 实现的校园服务型平台
07-11
【作品名称】：基于Uniapp + UniCloud + uview-ui 实现的校园服务型平台 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍...
uniCloud 云数据库(万字长文带你通关-入门~冲冲冲)
qq_43751598的博客
12-20 1668
uniCloud提供了一个 JSON 格式的文档型数据库,云数据库基本操作，万字长文带你通关。
如何利用unicloud阿里云云函数实现文件包括图片或文件上传，unicloud云函数写法一览
浩冉学编程的博客
06-01 588
但如果请求的 Content-Type 不是 application/json，云函数可能会将请求体解析为字符串并放在`queryStringParameters`中，而不是解析为 JSON 对象并放在`body`中。在云函数中，请求体(body)有时会出现在`queryStringParameters`中，而不是在`body`中，可能是因为请求的 Content-Type 类型不被云函数所支持，或者在请求的时候没有正确地设置请求头。这里以一个单文件上传为例子，多图多文件同理，循环单图处理逻辑即可。
unicloud初级入门01
虾米大王的学习历程
12-21 909
服务空间首次建立，时间较长，大家耐心等待一下，然后再hbuilderx工具，使用关联菜单，如图，对空间进行关联。学习了uniapp之后，本来想和springboot打通的，但是网上找了很久，没有发现合适的学习资料。在UNICloud文件夹上，右键单击，选择关联服务空间，跳转至unicloud官网，大家按照步骤注册。目前使用阿里云的空间，有一个月的免费期，有账号后，就新建服务空间，名称随意。注册完毕，需要补充个人资料，以及实名认证等，我就不赘述了。在页面的onload函数中，就可以调用这个建立的云函数了。
uniCloud云开发----3、uniApp中文件上传（通过插件(uniFilePicker)或者 uniCloud.uploadFile实现方案）
m0_50207524的博客
12-21 3524
uniapp图片上传插件unifilePicker在开发uniapp的时候上传文件是必不可少的，本文的方案1、通过unifilePicker插件来上传到云存储，然后云存储生成链接然后存入云数据库2、通过原生的 uniCloud.uploadFile来上传到云存储，在通过云存储的链接添加到数据库。
unicloud云函数里直接将网络图片或视频上传云存储
Miyin的博客
06-03 723
4年uniapp+unicloud开发经验，有需要前端开发、NVUE安卓、ios、或者小程序开发的老板可以联系我Q：431244025。//buffer.data 有些直接请求图片地址返回的不直接是buffer数组，需要再取一层看情况定。unicloud云函数里直接将网络图片上传云存储。分享个小经验希望能帮到你。
2023年最新最全uniCloud入门学习，零基础入门到实战项目 uni-admin打造uniapp网页后端 微信支付宝抖音小程序后端 unicloud数据后台快速打造uniapp小程序项目
编程小石头
04-23 7761
serverless是目前很火的概念，它是下一代云技术，是真正的“云”。传统的云服务，让开发者免于购买实体服务器硬件，改为购买虚拟机。但开发者仍然要自己装操作系统、web服务器、数据库，自己处理热备，自己新购服务器来应对高并发，自己抗DDOS攻击…这不是成熟的“云”！真正的云计算，就像用水用电，没有复杂的门槛，即用即有、按需付费。简单回顾下用电的历史。几十年前，很多单位都有专门管电的工程师，当单位的电力负荷不够时，就需要找这个管电的工程师扩容发电机。
【uniCloud介绍与使用】
weixin_75279226的博客
05-19 1169
uniCloud 是 DCloud 推出的一款专为开发者提供的云端一体化解决方案。它基于云原生架构，集成了云函数、数据库、存储、消息推送等功能，能够帮助开发者快速构建稳定、高效的云应用。
【翻译一下官方文档】认识uniCloud云数据库（基础篇）
coderwwh的博客
04-27 1139
我将用图文的形式，把市面上优质的课程加以自己的理解，详细的把：创建一个uniCloud的应用，其中的每一步记录出来，方便大家写项目中，做到哪一步不会了，可以轻松翻看文章进行查阅。（此文长期更新连载），本章简介云数据库基础篇
Unicloud 阿里云服务器作图床,从上传到部署api全流程
qq_61887118的博客
09-19 2921
Unicloud 阿里云服务器作图床,从上传到部署api全流程
unicloud的uni-id注册用户，数据库触发器 afterCreate
09-12
Unicloud（统一云）的Uni-ID是一种用于身份管理的服务，当您在Unicloud平台注册新用户时，数据库中的触发器`afterCreate`通常会在用户表单信息创建新记录后自动执行。`afterCreate`触发器的作用是在每次新用户账户被...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

虾米大王

有你的支持，我会更有动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值