uniapp中如何上传图片并预览

最新推荐文章于 2024-04-18 17:58:31 发布

ZOE^V1

最新推荐文章于 2024-04-18 17:58:31 发布

阅读量288

点赞数 1

分类专栏： vue 文章标签：前端 javascript css3

本文链接：https://blog.csdn.net/weixin_52568554/article/details/125137266

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<view>
		<view class="image" @click="uploadImg">
				<image v-for="(item,index) in imgArr" :src="item" style="width: 200px; height: 200px; background-color: #eeeeee;">
					
				</image>
		</view>
		<view @click="uploadImg" class="click-one"><text>从手机相册上传</text></view>
		<view class="to"><text>提交</text></view>
		<view class="to" @click="to"><text>通过搜索群号添加</text></view>
	</view>

export default{
		data(){
			return{
				imgArr:[]
			}
		},
		methods:{
			uploadImg(){
				let that = this//注意这里一定要这个样子，我也不知道为什么this指代就不可以
				uni.chooseImage({
					count: 1, //默认9
					sourceType: ['album'], //从相册选择
					success(res) {
						console.log(res.tempFilePaths)
						that.imgArr = res.tempFilePaths;
						console.log(that.imgArr)
						}
					})
			},
			to(){
				uni.navigateTo({
					url:'/pages/chat/search'
				})
			}
		}
	}

.image{
		margin-top:100rpx;
		margin-left: 25%;
		width: 200px;
		height: 200px; 
		background-color: #eeeeee;
	}
	.click-one{
		// margin-left: 275rpx;
		margin-top: 50rpx;
		// display: block;
		margin-left: 35%;
	}
	.to{
		background-color: #D44C3B1A;
		height:80rpx;
		line-height: 80rpx;
		margin-top: 100rpx;
		width:40%;
		text-align: center;
		border-radius: 20rpx;
		margin-left: auto;
		margin-right: auto;
	}