uniapp图片上传干货

uniapp图片上传干货

话不多说，上代码

view代码

<view class="spsdan overflow">
	<view class="fl mar-fr10">评价晒单</view>
	<view class="fl pjbox">
		<textarea class="textarea" type="text" value="" placeholder="分享心得，给万千想买的人一个参考" />
		<view v-for="(item,index) in img" class="img">
			<view class="iconfont iconcha2" v-if="img" @click="delet(index)"></view>
			<image :src="item" mode=""></image>
		</view>
	</view>
</view>
<view class="chuantu overflow">
	<image @click="upimg" style="margin-left: 68px;margin-right: 10px;" src="../../static/img/my/pingkia3.png" mode=""></image>
	<span class="chuantu-text">共<span class="red">0</span>张，还能上传<span class="red">9</span>张</span>
</view>

js代码

<script>
	export default {
		data() {
			return {
				img:'',
				add_class:''
			}
		},
		methods: {
			// 上传图片
			upimg(){
				uni.chooseImage({
					success: (res) => {
						console.log(res)
						uni.uploadFile({
							url:"#",
							filePath:res.tempFilePaths,
							name:'file',
							complete:(red)=>{
								console.log(red)
								if(this.img ){
									this.img.push(...res.tempFilePaths)
								}else{
									this.img = res.tempFilePaths
								}
							}
						})
					}
				})
			},
			// 删除照片
			delet(index){
				this.img.splice(index,1)
			},
			addclass(index){
				this.add_class=index;
			}
		}
	}
</script>

css代码

.pjbox {
		overflow: hidden;
		width: 75%;
	}
	.textarea {
		font-size: 24rpx;
		color: #666;
		width: 400rpx;
		height: 100rpx;
	}
	.img {
		width: 100rpx;
		height: 100rpx;
		float: left;
		margin-left: 20rpx;
		margin-top: 20rpx;
		position: relative;
	}
	.img>image{
		width: 100%;
		height: 100%;
	}
	.iconcha2 {
		font-size: 20rpx;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 10;
		background-color: #fff;
		border-radius: 50%;
		color: #D7000F;
	}
	.active{
		color: #D7000F;
	}

效果图

删除图片时是根据图片下标删除的

拿走不谢！！！