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

短命女 2023-06-30 02:17 11阅读 0赞

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

话不多说贴代码：

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

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

[uni-app]: https://blog.csdn.net/huanhuan03/article/details/103766737
[uni-app 1]: https://uniapp.dcloud.io/api/media/image?id=chooseimage
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200114090404625.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200114090545290.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200114091157578.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2020011409125677.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200114091349246.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70