1.在uniapp官网搜索下载icon
2.代码展示
<template>
<view>
<view class="feedback-title">
反馈图片
</view>
<view class="feedback-image-box">
<view class="feedback-image-item" v-for="(item,index) in imgArr" :key="index">
<view class="close-icon" @click="del(index)">
<uni-icons type="closeempty" size="18" color="#fff"></uni-icons>
</view>
<view class="image-box">
<image class="img_" :src="item" mode="aspectFill"></image>
</view>
</view>
<!-- 加号 -->
<view v-if="imgArr.length<3" class="feedback-image-item" @click="chooseImg">
<view class="image-box">
<uni-icons type="plusempty" size="50" color="#eee"></uni-icons>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
},
data() {
return {
imgArr:[]
};
},
methods: {
chooseImg() {
const count = 3 - this.imgArr.length
uni.chooseImage({
count: count,
success: (res) => {
this.handleImageToBase64(res.tempFilePaths);
}
})
},
handleImageToBase64(imagePaths) {
imagePaths.forEach((path,index) => {
uni.getFileSystemManager().readFile({
filePath: path,
encoding: 'base64',
success: (res) => {
console.log("res",res);
if(index<3){
this.imgArr.push('data:image/jpeg;base64,' + res
.data); // 将Base64编码的图片数据存入数组
}
},
fail: (error) => {
console.error('Failed to read file:', error);
}
});
});
},
del(index){
this.imgArr.splice(index,1)
}
},
components: {
},
};
</script>
<style scoped lang="less">
.feedback-title{
font-size: 14px;
margin: 15px;
margin-bottom: 0;
color: #666;
}
.feedback-image-box{
display: flex;
flex-wrap: wrap;
padding: 10px;
.feedback-image-item{
position: relative;
width: 33.3%;
height: 0;
padding-top: 33.33%;
box-sizing: border-box;
// border: 1px red solid;
.close-icon{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 0;
top: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background-color: #ff5a5f;
z-index: 2;
}
.image-box{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
border: 1px #eee solid;
border-radius: 5px;
overflow: hidden;
.img_{
width: 100%;
height: 100%;
}
}
}
}
</style>
3.效果展示