uni-app上传图片，预览

uni-app上传图片，预览

**uni.chooseImage(obj)**上传图片

• count 上传个数最多默认选择张数是9
• sizeType 上传的类型
  – original 原图
  – compressed 压缩图
• sourceType 上传方式
  – album 从相册选取
  – camera 使用相机
• success 上传成功则返回图片的本地路径列表tempFilePaths
• fail 失败
• complete 接口调用结束的回调函数，失败或成功都会执行

• count 值由于在h5平台的表现，由于浏览器的规范只能限制单选或多选，并不能限制数量，在实际的手机浏览器很少有能够支持多选的
• courceType 在H5端对应input的capture属性,设置为[album]无效，依然可以使用相机
• 可以通过用户授权API来判断是否给应用授予相册或摄像头的权限

上传图片

<view>
		<button type="warn" @click="chooseImg">上传图片</button>
		<image v-for="item in imgArr" :src="item" mode=""></image>
</view>

export default{
		data(){
			return {
				imgArr:[]
			}
		},
		methods:{
				chooseImg(){
					console.log('上传图片'),
					uni.chooseImage({   //上传图片的内置方法
						count:5, //在h5浏览器限制不住
						success:res=>{
							// console.log(this)
							this.imgArr=res.tempFilePaths  //返回的图片路径将他保存到imgArr中
							//注意这里有两坑，1.这里要使用箭头函数，指向外层，普通函数就指向success这个方法
							//2.这里的imgArr是数组不能直接绑定到src上面由于第一次我只上传一张图片，没发现这个问题，报错了
						}
					})
				}
		}
	}

效果

uni.previewImage(obj) 预览图片

• current 就是在新的页面显示你点击的那张图片，也就是放大
• urls 所有的图片列表
• indicator 是否显示图片指示器样式
  –default底部圆点指示器
  – number顶部数字指示器
  – none不显示指示器
  -loop是否可循环预览，默认是false
• longPressActions长按图片显示操作菜单，如不填默认为保存相册 1.9.5起开始支持
• success接口调用成功的回调函数
• fail接口调用失败的回调函数
• complete接口调用结束的回调函数，不管成功或是失败

<view>
		<button type="warn" @click="chooseImg">上传图片</button>
		<image v-for="item in imgArr" :src="item" mode="" @click="previewImg(item)"></image>
	</view>

export default{
		data(){
			return {
				imgArr:[]
			}
		},
		methods:{
			chooseImg(){
				console.log('上传图片'),
				uni.chooseImage({
					count:5, //在h5浏览器限制不住
					success:res=>{
					// console.log(this)
					this.imgArr=res.tempFilePaths
					}
				})
			},
			previewImg(current){
				uni.previewImage({
					current,	//当前的图片路径必填
					urls:this.imgArr, //数组文件路径必填
					loop:true,   //循环在5+app才有效
					indicator:"default" //指数器同样也是5+app有效
				})
			}
		}
	}

标签：console,success,预览,上传,app,uni,imgArr,图片
来源： https://blog.csdn.net/weixin_48255917/article/details/110129622