参考：https://www.jianshu.com/p/c1e0574ee63d
或者参考：https://www.cnblogs.com/changyaoself/p/9596237.html （mpvue,图片上传预览删除）
<template>
<div class="j-pic-upload">
<div class="j-upload-btn" @click="uploadImg()" :style="{'width':width || '120rpx','height':height || '120rpx'}">
<span class="j-upload-add">+</span>
</div>
<img @click="previewImg(index)" v-for="(src,index) in urls" :key="src" :src="src" :style="{'width':width || '120rpx','height':height || '120rpx'}" class="img" >
</div>
</template>
<script>
export default {
props:["width","height","max","srcs"],
data(){
return {
urls:[]
}
},
mounted(){
this.urls = this.srcs || [];
},
methods:{
uploadImg(){
let that = this;
wx.chooseImage({
count: that.max || 3,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
res.tempFilePaths.forEach(v=>{
that.urls.push(v);
});
that.emit("delete",that.urls);
}
},
});
},
}
}
</script>
<style scoped>
.j-pic-upload{
padding: 10rpx;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
.j-upload-btn{
border: 1px dashed #ddd;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-right: 20rpx;
}
.j-upload-add{
font-size: 80rpx;
font-weight: 500;
color:#C9C9C9;
}
.img{
margin:10rpx 20rpx 10rpx 0;
}
</style>
