uni-app -云函数上传/删除

最新推荐文章于 2025-06-11 16:21:02 发布

原创最新推荐文章于 2025-06-11 16:21:02 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#objective-c #ios #小程序

HBuilderX 专栏收录该内容

2 篇文章

订阅专栏

本文展示了如何在uni-app中使用云函数进行文件的上传和删除。通过uniCloud.deleteFile实现文件删除，并利用uni.chooseImage及uniCloud.uploadFile完成图片的选取与上传到云端，更新UI显示。

HBuilderX uni-app

云函数上传/删除文件：

云函数上传/删除文件：

<template>
	<view class="content">
		<image class="logo" :src="bg_image_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',
				bg_image_src:''
			}
		},
		onLoad() {
			 
		},
		methods: {
				
			open(){
				let that = this
				//云函数删除 文件
				uniCloud.deleteFile({
					fileList:["882d21c4-b019-4fb7-94f3-37c5efb35ce3"],
					success(res) {
						console.log("删除成功",res) 
					}, 
					fail(res) {
						console.log("删除失败",res)
					}
				})
				//云函数添加 文件
				uni.chooseImage({
					count:1,
					success(res) {
						const tempFilePath = res.tempFilePaths[0] 
						console.log("获取图片成功-->",res,"地址",tempFilePath)
						uniCloud.uploadFile({
							filePath:tempFilePath,
							cloudPath: 'haha.png',
							fileType:'image',
							success(res) {
								console.log("上传成功",res)
								that.bg_image_src = res.fileID
							}, 
							fail(res) {
								console.log("上传失败",res)
							}
						})
					},
					fail(res) {
						console.log("获取图片失败",res)
					}
				})
			}
		}
	}
</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>