uniapp - 图片的上传和预览

红太狼 2021-07-25 14:47 1257阅读 0赞

### 图片的上传和预览 ###

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

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

# uni.chooseImage(OBJECT) #

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

**OBJECT 参数说明**

<table> 
 <thead> 
  <tr> 
   <th align="left">参数名</th> 
   <th align="left">类型</th> 
   <th align="left">必填</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">count</td> 
   <td align="left">Number</td> 
   <td align="left">否</td> 
   <td align="left">最多可以选择的图片张数</td> 
  </tr> 
  <tr> 
   <td align="left">sizeType</td> 
   <td align="left">Array</td> 
   <td align="left">否</td> 
   <td align="left">original 原图，compressed 压缩图，默认二者都有</td> 
  </tr> 
  <tr> 
   <td align="left">sourceType</td> 
   <td align="left">Array</td> 
   <td align="left">否</td> 
   <td align="left">album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项</td> 
  </tr> 
  <tr> 
   <td align="left">success</td> 
   <td align="left">Function</td> 
   <td align="left">是</td> 
   <td align="left">成功则返回图片的本地文件路径列表 tempFilePaths</td> 
  </tr> 
  <tr> 
   <td align="left">fail</td> 
   <td align="left">Function</td> 
   <td align="left">否</td> 
   <td align="left">接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td align="left">complete</td> 
   <td align="left">Function</td> 
   <td align="left">否</td> 
   <td align="left">接口调用结束的回调函数（调用成功、失败都会执行）</td> 
  </tr> 
 </tbody> 
</table>

**示例**

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

# uni.previewImage(OBJECT) #

预览图片。

**OBJECT 参数说明**

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

**示例**

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>

[https_uniapp.dcloud.io_api_media_image_id_chooseimage]: https://uniapp.dcloud.io/api/media/image?id=chooseimage