uni-app（十）

• 图片的上传和预览

//图片上传
uni.chooseImage

//图片预览
uni.previewImage

//在mesage.vue页面写如下代码
<template>
    <view>
        <button type="default" @click="chooseImg">上传图片</button>
        <!-- 将图片显示到页面中 -->
        <image v-for="item in imgArr" :src="item" @click="previewImg(item)"></image>
    </view>
</template>
    
<script>
    export default{
        data(){
            return {
                imgArr:[]
            }
        },
        methods:{
            chooseImg(){
                // 上传图片的方法
                uni.chooseImage({
                    count:5, //图片数量，浏览器不限，小程序限制5张
                    success:res=>{
                        // 获取到页面路径
                        this.imgArr = res.tempFilePaths
                    }
                })
            },
            previewImg(current){
                console.log(current)
                // 预览图片的方法
                uni.previewImage({
                    current, //给每个图片一个路径
                    urls:this.imgArr //预览所有的图片列表
                })        
            }
        }
    }
</script>

<style>
</style>

浏览器效果展示  每点击一下图片会出现相应路径  点击进去图片可以进行预览

 

 

　　　　

 微信小程序效果

注意：微信小程序最多可以上传5张图片，浏览器不限制上传图片 count参数代表上传的图片

标签：预览,imgArr,app,current,uni,上传,图片
来源： https://www.cnblogs.com/staryin/p/15239059.html