uniapp android拍照 uniapp调用拍照

图片上传和预览

上传

uni.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照。

App端如需要更丰富的相机拍照API（如直接调用前置摄像头）

OBJECT 参数说明

参数名	类型	必填	说明	平台差异说明
count	Number	否	最多可以选择的图片张数，默认9	见下方说明
sizeType	Array	否	original 原图，compressed 压缩图，默认二者都有	App、微信小程序、支付宝小程序、百度小程序
extension	Array	否	根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。	H5(HBuilder X2.9.9+)
sourceType	Array	否	album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
crop	Object	否	图像裁剪参数，设置后 sizeType 失效	App 3.1.19+
success	Function	是	成功则返回图片的本地文件路径列表 tempFilePaths
fail	Function	否	接口调用失败的回调函数	小程序、App
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

借助以上的来实现一下uni.chooseImage

<template>
    <div>
        <button type="primary" @click="chooseImg">上传图片</button>
    </div>
</template>

<script>
    export default{
        name:'message',
        components:{},
        data() {
            return {
                
            }
        },
        methods: {
            chooseImg(){
                console.log('上传图片')//测试按键回调函数是否有效
                uni.chooseImage({
                    count: 5,
                    success(res){
                        console.log(res)
                    }
                })
            }
        },
    }
</script>

<style scoped>

</style>

点击上传图片选择图片(我选择的是四张图片)

{errMsg: "chooseImage:ok", tempFilePaths: Array(4), tempFiles: Array(4)}
errMsg: "chooseImage:ok"
tempFilePaths: Array(4)
    0: "http://tmp/STYho5jml4wgf97f1def7659fb791d523c85960c639e.jpg"
    1: "http://tmp/AcNw45SCHmeS528209faff922313781ba80a29a36e13.jpg"
    2: "http://tmp/PoBz3IMKZgDZ58aa3e5ca22b918fb4a97f57295a0dff.jpg"
    3: "http://tmp/cdakFaKndMXJ8dbe6fe4d2a3d3dd30124679d22fb3a9.jpg"
    length: 4
    nv_length: (...)
    __proto__: Array(0)
tempFiles: (4) [{…}, {…}, {…}, {…}]
__proto__: Object

这里用到的有:

参数名	类型	必填	说明	平台差异说明
count	Number	否	最多可以选择的图片张数，默认9	见下方说明

参数名	类型	必填	说明	平台差异说明
success	Function	是	成功则返回图片的本地文件路径列表 tempFilePaths

怎么在临时文件里面的数组保存&上传显示图片:

<template>
    <div>
        <Image v-for="item in mesImgArr" :src="item"></Image>
        <button type="primary" @click="chooseImg">上传图片</button>
    </div>
</template>

<script>
    export default{
        name:'message',
        components:{},
        data() {
            return {
                mesImgArr:[]
            }
        },
        methods: {
            chooseImg(){
                // console.log(this)
                console.log('上传图片')//测试按键回调函数是否有效
                uni.chooseImage({
                    count: 5,
                    success:res=>{
                        console.log(res)
                        //console.log(this)//undefined
                        this.mesImgArr = res.tempFilePaths
                    }
                })
            }
        },
    }
</script>

<style scoped>

</style>

预览

uni.previewImage(OBJECT)

预览图片。

OBJECT 参数说明

参数名	类型	必填	说明	平台差异说明
current	String/Number	详见下方说明	详见下方说明
urls	Array	是	需要预览的图片链接列表
indicator	String	否	图片指示器样式，可取值：“default” - 底部圆点指示器； “number” - 顶部数字指示器； “none” - 不显示指示器。	App
loop	Boolean	否	是否可循环预览，默认值为 false	App
longPressActions	Object	否	长按图片显示操作菜单，如不填默认为保存相册	App 1.9.5+
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

什么时候调用这个方法: 当我点击这个图片的时候进行预览

参数名	类型	必填	说明	平台差异说明
current	String/Number	详见下方说明	详见下方说明
urls	Array	是	需要预览的图片链接列表

这俩个你必须要有的

<template>
    <div>
        <Image v-for="item in mesImgArr" :src="item" mode="aspectFit" @click="previewImg(item)"></Image>
        <button type="primary" @click="chooseImg">上传图片</button>
    </div>
</template>

<script>
    export default{
        name:'message',
        components:{},
        data() {
            return {
                mesImgArr:[]
            }
        },
        methods: {
            chooseImg(){
                // console.log(this)
                console.log('上传图片')//测试按键回调函数是否有效
                uni.chooseImage({
                    count: 5,
                    success:res=>{
                        console.log(res)
                        //console.log(this)//undefined
                        this.mesImgArr = res.tempFilePaths
                    }
                })
            },
            previewImg(cur){
                console.log(cur)
                /* uni.previewImage({
                }) */
            }
        },
    }
</script>

<style scoped>

</style>

这里的cur就是你图片的地址

http://tmp/dWWXb9tEHsIZf97f1def7659fb791d523c85960c639e.jpg

再是

previewImg(cur){
	console.log(cur)
    uni.previewImage({
    	current: cur,
        urls:this.mesImgArr
	})
}

想要图片循环

previewImg(cur){
	console.log(cur)
    uni.previewImage({
    	current: cur,
        urls:this.mesImgArr,
        loop:true
	})
}

还是不行，是因为平台差异只限制在App中才能生效