uniapp实现上传图片并显示

陆先森

uniapp为我们提供了非常多的api接口，当然包括上传图片的接口，可以直接使用

uniapp图片上传接口 - uni.chooseImage(OBJECT)

参数名	类型	必填	说明	平台差异说明
count	Number	否	最多可以选择的图片张数，默认9	见下方说明
sizeType	Array	否	original 原图，compressed 压缩图，默认二者都有	App、VX小程序、zfb小程序、百d小程序
sourceType	Array	否	album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
success	Function	是	成功则返回图片的本地文件路径列表 tempFilePaths
fail	Function	否	接口调用失败的回调函数	小程序、App
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

Tips

• count 值在 H5 平台的表现，基于浏览器本身的规范。目前测试的结果来看，只能限制单选/多选，并不能限制数量。并且，在实际的手机浏览器很少有能够支持多选的。
• sourceType 在H5端对应input的capture属性，设置为['album']无效，依然可以使用相机。

success 返回参数说明

参数	类型	说明
tempFilePaths	Array	图片的本地文件路径列表
tempFiles	Array、Array	图片的本地文件列表，每一项是一个 File 对象

File 对象结构如下

参数	类型	说明
path	String	本地文件路径
size	Number	本地文件大小，单位：B
name	String	包含扩展名的文件名称，仅H5支持
type	String	文件类型，仅H5支持

示例：

利用uniapp提供的接口上传图片并显示到页面中

<template>
    <view class="content">
        <image src="../../static/logo.png" @click="uploadImg" mode=""></image>
        -------------------------------------
        <image v-for="(item,index) in imgArr" :src="item">

        </image>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                imgArr:[]
            }
        },
        onLoad() {

        },
        methods: {
            uploadImg(){
                let that = this
                uni.chooseImage({
                    success(res) {
                        console.log(res.tempFilePaths)
                        that.imgArr = res.tempFilePaths;
                        console.log(that.imgArr)
                        }
                })
            }
        }
    }
</script>