unicloud中上传图片

短命女 2021-07-25 20:21 531阅读 0赞

# 例1： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

<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 ##

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

![2021062601045198.png][]![20210626011016574.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/d06fe5b31f3047a58c3bad598392c1a6.png
[2021062601045198.png]: https://img-blog.csdnimg.cn/2021062601045198.png
[20210626011016574.png]: /images/20210725/b39a36d3a1794e4ea851f378e593d400.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/2d33ec977cb04c1b84567224baaa91f5.png