uni-app上传图片,预览

uni-app上传图片,预览

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

  • count 上传个数最多默认选择张数是9
  • sizeType 上传的类型
    original 原图
    compressed 压缩图
  • sourceType 上传方式
    album 从相册选取
    camera 使用相机
  • success 上传成功则返回图片的本地路径列表tempFilePaths
  • fail 失败
  • complete 接口调用结束的回调函数,失败或成功都会执行
  • count 值由于在h5平台的表现,由于浏览器的规范只能限制单选或多选,并不能限制数量,在实际的手机浏览器很少有能够支持多选的
  • courceType 在H5端对应inputcapture属性,设置为[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-app上传图片,预览

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有效
				})
			}
		}
	}

uni-app上传图片,预览

上一篇:广告位随机切帧demo


下一篇:vue-cli4脚手架搭建三