云储存

最新推荐文章于 2023-02-13 16:01:43 发布

一个孤独漫步者的遐想

最新推荐文章于 2023-02-13 16:01:43 发布

阅读量237

点赞数

分类专栏： uni-app

本文链接：https://blog.csdn.net/weixin_43555997/article/details/113740298

版权

uni-app

uni-app 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

使用云储存上传文件

- - - 上传并回显
    - 删除

index.vue

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<button @click="open">执行云函数</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			
			open(){	
				uni.chooseImage({					
					count:1,	//设置数量			
					success(res) {
						
						//获取文件路劲
						const temFilePath=res.tempFilePaths[0]
						console.log(temFilePath);
						//获取文件名
						const temFileName=res.tempFiles[0].name
						console.log(temFileName);
						
						
						uniCloud.uploadFile({
							filePath:temFilePath,
							cloudPath:temFileName,
							success() {
								console.log(res);
							},fail(err) {
								console.log(err);
							}
						})
						
						
					},
					fail(err) {
						console.log(err);
					}
					
				})
					
					
					
					
			
				
			}
			
			
			
			}
		}
	
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MFT6azJK-1612678548693)(F:\Uni-app.assets\image-20210207111346248.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-069xYgbC-1612678548698)(F:\Uni-app.assets\image-20210207113956991.png)]$

上传并回显

<template>
	<view class="content">
		<image class="logo" :src="src"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<button @click="open">执行云函数</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				src:''
			}
		},
		onLoad() {

		},
		methods: {
			
			open(){	
				let self=this
				uni.chooseImage({					
					count:1,	//设置数量			
					success(res) {
						
						//获取文件路劲
						const temFilePath=res.tempFilePaths[0]
						//console.log(temFilePath);
						//获取文件名
						const temFileName=res.tempFiles[0].name
						//console.log(temFileName);
						
						
						uniCloud.uploadFile({
							filePath:temFilePath,
							cloudPath:temFileName,
							success(res) {
								console.log(res);
								self.src=res.fileID;
								console.log(res.fileID)
								
							},fail(err) {
								console.log(err);
							}
						})
						
						
					},
					fail(err) {
						console.log(err);
					}
					
				})
					
					
					
					
			
				
			}
			
			
			
			}
		}
	
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

删除

<template>
	<view class="content">
		<image class="logo" :src="src"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<button @click="open">执行云函数</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				src:''
			}
		},
		onLoad() {

		},
		methods: {
			
			open(){	
				//let self=this
				// uni.chooseImage({					
				// 	count:1,	//设置数量			
				// 	success(res) {
						
				// 		//获取文件路劲
				// 		const temFilePath=res.tempFilePaths[0]
				// 		//console.log(temFilePath);
				// 		//获取文件名
				// 		const temFileName=res.tempFiles[0].name
				// 		//console.log(temFileName);
						
						
				// 		uniCloud.uploadFile({
				// 			filePath:temFilePath,
				// 			cloudPath:temFileName,
				// 			success(res) {
				// 				console.log(res);
				// 				self.src=res.fileID;
				// 				console.log(res.fileID)
								
				// 			},fail(err) {
				// 				console.log(err);
				// 			}
				// 		})
						
						
				// 	},
				// 	fail(err) {
				// 		console.log(err);
				// 	}
					
				// })
					
				
				//删除文件
				uniCloud.deleteFile({
					fileList:['https://vkceyugu.cdn.bspapp.com/VKCEYUGU-b779afdf-c6d2-46a0-a25b-3687614f0125/4215afaf-bdd2-436f-adc4-1a7778f33d7b.png'],
					success(res) {
						console.log(res)
					},fail(err) {
						console.log(err)
					}
				})
	
					
					
			
				
			}
			
			
			
			}
		}
	
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>