unicloud中上传图片

例1：

 

<template>
	<view class="content">
		<image class="logo" :src="src"></image>
		<button @click="open()">上传图片</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			src:''
		};
	},
	onLoad() {
	},
	methods: {
		open() {
			uni.chooseImage({
				count:1,
				success:(res)=>{
					uniCloud.uploadFile({
						cloudPath: Date.now() + '.png',
						filePath:res.tempFilePaths[0],
						success: (res) => {
							this.src=res.fileID
						}
					})
				},
				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>

例2

存在问题：本地真机调试可以上传图片，但普通调试不能上传图片，发布成体验版后也不能上传图片 

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为客户端上传的参数
	return res
};

images/images.vue:

<template>
	<view >
		<button type="default" @click="upload">上传图片</button>
		<button type="default" @click="browseImage">查看云图片</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			upload() {
				uni.chooseImage({
					count: 1,
					success(res) {
						if (res.tempFilePaths.length > 0) {
							uni.showLoading({
								title: '上传中...'
							})
							
							let filePath = res.tempFilePaths[0]					
							// callback方式 ，进行上传操作
							uniCloud.uploadFile({
								filePath: filePath,  //要上传的文件对象
								cloudPath: Date.now() + '.jpg',  //保存在云端的文件名，这里以时间戳命名
								success(res) {
									//console.log(res.fileID)
									let imageUrl = res.fileID  //云端返回的图片地址
									uniCloud.callFunction({  //调用云端函数，把图片地址写入表
										name: 'addImage',  //云函数名称
										data: {				//提交给云端的数据
											imageUrl: imageUrl,									
											createTime: Date.now()
										},
										success: (res) => {	
											//console.log('数据插入成功')
											console.log(res)
										},
										fail: (err) => {
											console.log(err)
										},
										complete: () => {
											
										}				
									})
								},
								fail(err) {
									console.log(err)
								},
								complete() {
									uni.hideLoading()
								}
							});		
						}
					}
				});
			},
			
			browseImage() {				
				uni.navigateTo({  //跳转到指定页面
					url: "../browseImage/browseImage",
				});
			}
		}
	}
</script>

<style>
</style>

selectImage/index.js:

'use strict';
const db = uniCloud.database()
exports.main = async (event, context) => {  //event为客户端上传的参数    
    const collection = db.collection('tableImages') // 获取表'tableImages'的集合对象
	const res = await collection
				.orderBy('createTime','desc')  //排序
				.get() //获取数据

    return res // 返回json给客户端
};

browseImage/browseImage.vue:

<template>
	<view style="column-count: 2;">
		<view v-for="(item, index) in imgList" :key="index"><image style="width: 100%;" mode="widthFix" :src="item.imageUrl" :data-src="item.imageUrl" @click="clickimg" /></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			imgList: []
		};
	},
	onLoad() {
		uni.showLoading({
			title: '查询中...'
		});
		uniCloud.callFunction({
			//调用云函数
			name: 'selectImage', //云函数名称
			success: res => {
				this.imgList = res.result.data; //云端返回的数据
			},
			fail(e) {
				console.log(e);
			},
			complete: () => {
				uni.hideLoading();
			}
		});
	},

	methods: {
		// 图片预览
		clickimg(event) {
			
			let imgurl = event.currentTarget.dataset.src;
			let currentUrl = event.currentTarget.dataset.src; //获取点击图片的地址, **对应<template>里面的 :data-src="item.src"
			uni.previewImage({
				urls: [imgurl], //这里是单图 . 需要预览的全部图片地址,这个数组是必须的,要用[]
				current: currentUrl //当前显示图片的地址
			});
		}
	}
};
</script>

<style></style>

index/index.vue:

<template>
	<view>
		<button class="btn" type="default" @click="toImages">toImages</button>
	</view>
</template>

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

		},
		methods: {
toImages() {				
				uni.navigateTo({  //跳转到指定页面
					url: "../images/images",
				});
			}
		}
	}
</script>