uni-api图片上传和预览

爱被打了一巴掌 2021-07-24 23:19 535阅读 0赞

# 一 点睛 #

1 官网： [http://uniapp.dcloud.io/api/media/image][http_uniapp.dcloud.io_api_media_image]

2 核心API

*  uni.chooseImage(OBJECT)
 *  uni.previewImage(OBJECT)

# 二 代码 #

1 新建 photo.vue

<template>
    	<view>
    		<button type="primary" @click="updatePhoto">上传图片</button>
    		<image v-for="item in imgArr" :src="item" @click="previewImg(item)"></image>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				imgArr: []
    			}
    		},
    		methods: {
    			updatePhoto() {
    				uni.chooseImage({
    					count: 5, //默认9
    					success: res => {
    						this.imgArr = res.tempFilePaths
    					}
    				});
    			},
    			previewImg(current) {
    				uni.previewImage({
    					current: current,
    					urls: this.imgArr,
    					loop:true,
    					indicator:'number'
    				})
    			}
    
    		}
    	}
    </script>
    
    <style>
    </style>

2 修改路由 pages.json

{
    	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    		{
    			"path": "pages/photo/photo"
    		},
    		{
    			"path": "pages/list/list",
    			"style":{
    				"enablePullDownRefresh": true,
    				"onReachBottomDistance":200
    			}
    		},
    		{
    			"path": "pages/index/index"
    		},
    		{
    			"path":"pages/home/home"
    		},
    		{
    			"path": "pages/uni-style/uni-style"
    		},
    		{
    			"path": "pages/message/message",
    			"style":{
    				"navigationBarTitleText":"信息页",
    				"navigationBarBackgroundColor":"#007AFF",
    				"h5":{
    					"pullToRefresh":{
    						"color":"#7D26CD"
    					}
    				}
    			}
    		},
    		{
    			"path": "pages/contact/contact"
    		},
    		{
    			"path": "pages/detail/detail"
    		}
    	],
    	"globalStyle": {
    		"navigationBarTextStyle": "white",
    		"navigationBarTitleText": "绿帽子",
    		"navigationBarBackgroundColor": "#7FFF00",
    		"backgroundColor": "#7CCD7C",
    		"backgroundTextStyle":"light"
    	},
    	"tabBar":{
    		"color":"#F0AD4E",
    		"selectedColor":"#4CD964",
    		"backgroundColor":"#007AFF",
    		"borderStyle":"black",
    		"list":[
    			{
    				"text":"首页",
    				"pagePath":"pages/index/index",
    				"iconPath":"static/tabs/1237644.png",
    				"selectedIconPath":"static/tabs/1237719.png"
    			},
    			{
    				"text":"信息页",
    				"pagePath":"pages/message/message",
    				"iconPath":"static/tabs/1246271.png",
    				"selectedIconPath":"static/tabs/1262419.png"
    			},
    			{
    				"text":"我们",
    				"pagePath":"pages/contact/contact",
    				"iconPath":"static/tabs/1262419.png",
    				"selectedIconPath":"static/tabs/1289167.png"
    			}
    		]
    	},
    	"condition":{
    		"current":0,
    		"list":[
    			{
    				"name":"详情页",
    				"path":"pages/detail/detail",
    				"query":"id=80"
    			}
    		]
    	}
    }

# 三 效果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[http_uniapp.dcloud.io_api_media_image]: http://uniapp.dcloud.io/api/media/image
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/76b10d1c7202463b8a53ff7b6c7ac383.png