uni-app图片上传和预览

uni.chooseImage(OBJECT)
从本地相册选择图片或使用相机拍照。

上代码：

<button type="primary" @tap="chooseImage()">上传图片</button>

methods: {
            chooseImage:function(){
                uni.chooseImage({
                    count:4,//限制图片上传数量，封顶9张
                    success:function(res){//拿到图片的返回数据
                        console.log(res)
                    }
                })
            }
        }

输出我们的res返回结果

会看到一个tempFilePaths字段

        data () {
            return {
                imgArr:[]
            }
        },
        methods: {
            chooseImage:function(){
                uni.chooseImage({
                    count:4,//限制图片上传数量，封顶9张
                    success:(res)=>{//拿到图片的返回数据
                        console.log(res)
                        this.imgArr = res.tempFilePaths
                    }
                })
            }
        }

success成功回调这里必须要用箭头函数的形式，不然this指针失效，会报undefind。

这样写会报错

success:function(res){//拿到图片的返回数据
                        console.log(res)
                        this.imgArr = res.tempFilePaths
                    }

如果不想用箭头函数，可以改成这样,提前声明this指针。

chooseImage:function(){
                let _this = this
                uni.chooseImage({
                    count:4,//限制图片上传数量，封顶9张
                    success:function(res){//拿到图片的返回数据
                        console.log(res)
                        _this.imgArr = res.tempFilePaths
                    }
                })
            }

如果我们想看到imgArr这个数组变量，需要借助微信开发者工具的appData面板进行查看

接下我们只需要遍历imgArr这个数组，就可以在视图上呈现出用户刚刚上传的图片了。

<image v-for="(item,index) in imgArr" :src="item" mode=""></image>

实现图片的预览功能

uni.previewImage(OBJECT) 预览图片。

我们发现我们现在点击图片是没有任何反应的。

所以，当我点击图片的时候，调用函数实现图片预览功能。所以我们需要给每一张图片@绑定注册一个事件，然后把item传进去，这里的item就是我们的每一张图片的特定的标识,也就是图片的路径。

<image v-for="(item,index) in imgArr" :src="item" @tap="previewImage(item)"></image>

方法定义：

previewImage:function(current){//用current去接收我们的传进来的item,即图片路径
                console.log(current) //输出一下我们到底有没有拿到传进来的图片路径
                uni.previewImage({
                    //current:current,//然后把我们拿到的图片路径赋值给current
                    //又因为同名，所以可以直接写成 current 这个形式，这是ES6的语法
                    current,
                    urls:this.imgArr //把上传的图片列表给urls,让他实现图片预览
                })
            }

预览效果：
当我们点击图片的时候，我们会看到图片进入一个预览空间，还可滑动图片。

试了一下这个2个参数发现没反应。

应该是app才能生效。