10-上传图片、预览图片

上传图片、预览图片

上传图片

uni.chooseImage方法从本地相册选择图片或使用相机拍照。

案例代码

<template>
    <view>
        <button @click="chooseImg" type="primary">上传图片</button>
        <view>
            <image v-for="item in imgArr" :src="item" :key="index"></image>
        </view>
    </view>
</template>

<script>
    export default {
        data () {
            return {
                imgArr: []
            }
        },
        methods: {
            chooseImg () {
                uni.chooseImage({
                    count: 9,
                    success: res=>{
                        this.imgArr = res.tempFilePaths
                    }
                })
            }
        }
    }
</script>

预览图片

结构

<view>
    <image v-for="item in imgArr" :src="item" @click="previewImg(item)" :key="item"></image>
</view>

预览图片的方法

previewImg (current) {
  uni.previewImage({
    urls: this.imgArr,
    current
  })
}