uniapp上传头像和最多上传9张demo效果(整理)

uniapp上传头像和最多上传9张demo效果(整理)

<template><view><!-- //默认显示的 --><image v-if="!imgUrl" :src="require('../../static/nav/icon_me_n.svg')" class="headPhoto"  @tap="openChooseImg"></image><!-- //用户点击修改的 --><image v-else :src="imgUrl" class="headPhoto"></image></view>
</template><script>export default {data() {return {imgUrl: ""};},methods: {openChooseImg() {uni.chooseImage({count: 1, //最多可选择的张数sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], //从相册选择，和摄像头功能，默认二者都有success: res => {console.log(res, '头像res')this.imgUrl = pFilePaths[0] //把选择的头像赋值给imgurlconsole.log(this.imgUrl, 'this.imgUrl')}});},},};
</script><style lang="scss">.timeBox {margin-top: 50rpx;}
</style>

上传多张
addPic() {uni.chooseImage({count: 5,success: (res) => {// show('图片上传中...');uni.showLoading({title: "图片上传中...",mask: true,})console.log(res, '2135');pFilePaths.forEach((item, index) => {this.$.file_upload(item, {}, res => {if (de == 1000) {this.jpegList.push(res.data);this.$.hide();} else if (de == 9999) {this.$.hide();this.$.toast("接口报错9999");}})});}})
},

<template><view><view class="row-me row-center font-size30 color090B0D padding-top30 margin-bottom20 margin-left30 margin-right30 "><view class="colorF24444">*</view><view class="font-bold">上传图片（{{photoList.length}}/9）</view></view><view class="houseType"><view class="houseImg" v-for="(item,index) in photoList"><image :src="item" @click="preViewImg(item)" mode="widthFix" class="img"></image><image @click="deletePic(index)" src="../../static/img/delete.png" mode="widthFix"class="deleteImg"></image></view><view class="addImg flex-center" @click="addPic()" v-if="photoList.length <9"><image src="../../static/img/tianjia.png" mode="widthFix" class="img" /></image></view></view></view>
</template><script>export default {data() {return {photoList: ""};},methods: {//上传图片，户型和房型addPic(type) {uni.chooseImage({count: 1,success: (res) => {// show('图片上传中...');uni.showLoading({title: "图片上传中...",mask: true,})console.log(res, '231')let tempList = [...this.photoList, ...pFilePaths] //临时显示if (tempList.length > 9) {//提示用户 最多只能上传9张uni.showToast({title: '最多只能上传9张图片哦～'});} else {this.photoList = tempListuni.hideLoading();}}})},//删除上传deletePic(index) {this.photoList.splice(index, 1)},//点击打开预览preViewImg(currentSrc) {uni.previewImage({current: currentSrc,urls: this.photoList //需要预览的图片链接列表	})},},};
</script><style lang="scss">.houseType {overflow: hidden;.houseImg {width: 195rpx;height: 195rpx;border: 1rpx solid #ECECEC;border-radius: 10rpx;position: relative;float: left;/* margin-right: 15rpx; */margin-bottom: 20rpx;margin-left: 25rpx;.img {width: 195rpx !important;height: 195rpx !important;}.deleteImg {width: 40rpx;height: 40rpx;position: absolute;right: 10rpx;top: 10rpx;}}.addImg {width: 196rpx;height: 196rpx;background: #F6F6F6;margin-bottom: 20rpx;float: left;margin-left: 25rpx;.img {width: 196rpx;height: 196rpx;}}}
</style>