uniapp上传图片以及图片预览

最新推荐文章于 2024-07-06 17:39:54 发布

Eustoma_79

最新推荐文章于 2024-07-06 17:39:54 发布

阅读量89

点赞数

文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/qq_41924402/article/details/120221350

版权

本文介绍了一个使用Vue.js实现的简单应用，展示了如何通过uni-app API进行图片选择和预览。开发者学习了如何限制上传数量，以及如何利用`uni.chooseImage`和`uni.previewImage`方法来操作用户上传的图片。

摘要由CSDN通过智能技术生成

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

<script>
	export default {
		data () {
			return {
				imgArr: [],
				fileArr: []
			}
		},
		methods: {
			chooseImg () {
				uni.chooseImage({
					// count: 3,
					success: (res => {
						this.imgArr = res.tempFilePaths
					})
				})
			},
			previewImg (current) {
				uni.previewImage({
					current,
					urls: this.imgArr,
					loop:true,
					indicator: 'number'
				})
			},
		},
	}
</script>

count表示限制上传图片的数目，可以不设置。