uni-app小程序--从相册选择照片image或者拍照

这是如何用uni-app开始构建小程序
这是uni-app官网对获取图片的解释

话不多说贴代码:

<template>
	<view class="laugh">
		<button type="primary" @click="getImg">请选择图片</button>
		<uni-list>
		    <uni-list-item v-for="(item, index) in imgArr" :key='index'>
				<image :src="item" :mode="scaleToFill"></image>
			</uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	import uniList from "@/components/uni-list/uni-list.vue"         // uni-app列表组件,渲染图片列表
	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"        // 列表项组件
	export default {
		data() {
			return {
				imgArr: [],
			}
		},
		onLoad() {

		},
		methods: {
			getImg () {
				var that = this
				uni.chooseImage({
				    count: 6,           // 最多可以选择的图片张数,默认9
				    sizeType: ['original', 'compressed'],              //original 原图,compressed 压缩图,默认二者都有
				    sourceType: ['album', 'camera'],             //album 从相册选图,camera 使用相机,默认二者都有。如需直接开相机或直接选相册,请只使用一个选项
				    success: function (res) {
				        console.log(JSON.stringify(res.tempFilePaths));
						that.imgArr = res.tempFilePaths
				    }
				});
			},
		}
	}
</script>

<style scoped lang="less">
	
</style>

这是官方对这些参数的解释:
在这里插入图片描述
然后启动项目,运行至微信开发者工具,这个不能再开发者上调试,所以选择开发者上的真机调试,然后开发者就会弹出一个控制台窗口,真机上右上角也会出现这个灰色窗口,可以展开有很多信息:
在这里插入图片描述
点击‘请选择图片’:
在这里插入图片描述
选择‘从手机相册选择’,选择多张:
在这里插入图片描述
或者选择‘拍照’,拍好后:
在这里插入图片描述
就是这么多,关于这个success函数返回类型,可以看官方文档。

发布了38 篇原创文章 · 获赞 28 · 访问量 956

猜你喜欢

转载自blog.csdn.net/huanhuan03/article/details/103967268