图片的上传和预览

uni.chooseImage(OBJECT)uni.previewImage(OBJECT)一个图片上传和预览的 demo 实例

更多图片上传内容请查看 uniapp 官网：https://uniapp.dcloud.io/api/media/image?id=chooseimage

uni.chooseImage(OBJECT)

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

OBJECT 参数说明

参数名类型必填说明countNumber否最多可以选择的图片张数sizeTypeArray否original 原图，compressed 压缩图，默认二者都有sourceTypeArray否album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项successFunction是成功则返回图片的本地文件路径列表 tempFilePathsfailFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

示例

uni.chooseImage({ count: 3, success: res => { console.log("结果", res) } })

uni.previewImage(OBJECT)

预览图片。

OBJECT 参数说明

参数名类型必填说明currentString/NumberurlsArray是需要预览的图片链接列表indicatorString否图片指示器样式，可取值：“default” - 底部圆点指示器； “number” - 顶部数字指示器； “none” - 不显示指示器。loopBoolean否是否可循环预览，默认值为 falselongPressActionsObject否长按图片显示操作菜单，如不填默认为保存相册successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

示例

uni.previewImage({ current:current, urls:res.tempFilePaths, indicator:"number", loop:true })

一个图片上传和预览的 demo 实例

<template> <view> <button @click="upload">上传图片</button> <image v-for="(item,index) in imgList" :key="index" :src="item" @click="searchImg(item)"></image> </view> </template> <script> export default { data() { return { imgList: [] } }, methods: { upload() { uni.chooseImage({ count: 3, success: res => { console.log("结果", res) } }) }, searchImg(current){ uni.previewImage({ current:current, urls:this.imgList, indicator:"number", loop:true }) } } } </script> <style> </style>