uniapp 上传删除预览图片
上传图片组件 UploadImg.vue
//UploadImg.vue
<template>
<!-- 上传附件-->
<view class="comment-image-style">
<view class="img" v-if="imgArr.length === 0 ">
<u-image width="100%" height="100%" src="/static/icon/upload.png"
alt="upload"
@click="uploadImg"></u-image>
</view>
<view class="imgBox-style">
<view class="flex-item-style" v-for="(item,index) in imgArr" :key="index"
>
<view v-if="show" style="width:0;height:0;">
<u-icon class="icon-style" name="close-circle" color="#EF0000" size="28"
@click="deleteImg(index)"
></u-icon>
</view>
<view>
<u-image class="u-m-20" width="150rpx" height="150rpx" :src="item"
@click="previewImage(index)">
</u-image>
</view>
</view>
<view class="img" v-if="(imgArr.length > 0 && imgArr.length < 9 && show)">
<u-image width="100%" height="100%" src="/static/icon/upload.png"
alt="addImg"
@click="addImg">
</u-image>
</view>
</view>
</view>
</template>
<script>
export default {
name: '',
props: {
imgArr: {
type: Array
},
show: {
type: Boolean
}
},
data() {
return {};
},
computed: {},
watch: {},
methods: {
uploadImg() {
this.$emit('uploadImg');
},
addImg() {
this.$emit('addImg');
},
deleteImg(index) {
this.$emit('deleteImg', index);
},
previewImage(index) {
this.$emit('previewImage', index);
}
}
};
</script>
<style lang="scss" scoped>
.comment-image-style {
height: 100%;
width: 100%;
}
.img {
margin: 20rpx;
width: 150rpx;
height: 150rpx
}
.imgBox-style {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: start;
text-align: center;
width: 100%;
.flex-item-style {
width: 25%;
}
.icon-style {
position: relative;
right: -140rpx;
top: 16rpx;
z-index: 999;
}
}
</style>
方法
//上传图片
uploadImg() {
uni.chooseImage({
count: 9,
sizeType: ['original', 'compressed'],
sourceType: ['album'],
success: (res) => {
this.imgArr = res.tempFilePaths;
},
fail: (res) => {
console.log(res);
}
});
},
//添加图片
addImg() {
uni.chooseImage({
count: 9 - this.imgArr.length,
sizeType: ['original', 'compressed'],
sourceType: ['album'],
success: (res) => {
this.imgArr = this.imgArr.concat(res.tempFilePaths);
},
fail: (res) => {
console.log(res);
}
});
},
//删除图片
deleteImg(index) {
uni.showModal({
title: '提示',
content: '是否要删除此图片?',
success: (res) => {
if (res.confirm) {
this.imgArr.splice(index, 1);
}
}
});
},
//预览图片
previewImage(index) {
uni.previewImage({
current: index,
urls: this.imgArr
});
}
本文来自博客园,作者:1940,转载请注明原文链接:https://www.cnblogs.com/beiyi-Lin/p/15816475.html