uni图片上传

最新推荐文章于 2024-09-12 15:56:50 发布

w盒子

最新推荐文章于 2024-09-12 15:56:50 发布

阅读量160

点赞数

分类专栏： vue uni 文章标签：前端开发语言

本文链接：https://blog.csdn.net/qq_44167313/article/details/128174117

版权

vue uni 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言: 之前的方式也可以用，但有一个bug就是选中后不能第二次选择，猜想应该是this丢失的问题

添加imgclick点击事件

<image class="imgclass" @tap="imgclick"></image>

添加uni.chooslmage函数

这个方法在uni-app官网: uni.chooseImage(OBJECT) | uni-app官网
写这个方法的时候我发现官网很多方法没有说怎么用, 怎么办呢? 然后发现其实都可以放大点击事件中试试

uni.chooseImage({
	count: 6, //默认9
	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	sourceType: ['album'], //从相册选择
	success: function (res) {
		console.log(JSON.stringify(res.tempFilePaths));
	}
});

添加imgsrc变量

4.1 把image中的 src=“” 改成变量的形式 :src=“imgsrc”

<image class="imgclass" :src="imgsrc" @tap="imgclick"></image>

4.2 在data()中放一个 imgsrc:‘…/…/static/img/jiahao.png’ , 这张图片就是默认显示的图片，也可以不放但如果不放的话会显示什么也没有，但可以点击。

data() {
			return {
				imgsrc:'../../static/img/jiahao.png'
			}
		},

防止this的丢失

5.1 把选中的图片的路基给data中的imgsrc

//把选中的图片的路基给data中的imgsrc
_this.imgsrc = res.tempFilePaths[0];

5.2 按照逻辑应该把this放在最前面

var _this = this;

全部代码

<template>
	<View>
		<view class="imgview2">
			<image class="imgclass"
				:src="imgsrc" @tap="imgclick"></image>
		</view>
	</View>
</template>

<script>
	export default {
		data() {
			return {
				imgsrc:'../../static/img/jiahao.png'
			}
		},
		
		methods: {
			imgclick(){
				//为什么要到前面定义一个this 因为this可能会丢失
				var _this = this;
				uni.chooseImage({
					count: 1, //默认9
					//original 原图    
					//compressed 压缩
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					//回调函数
					//JSON.stringify(res.tempFilePaths) 成功时产生的路径
					success: function (res) {
						console.log(JSON.stringify(res.tempFilePaths));
						//把选中的图片的路基给data中的imgsrc
						_this.imgsrc = res.tempFilePaths[0];
						
						//为什么要到前面定义一个this 因为this可能会丢失
					}
				});
			}
		}
	}
</script>

<style>

</style>