<template>
<view class="four-img-flex">
<view class="upload-img">
<view class="viewimg" v-for="(item,index) in thumbnailUrls" :key="index">
<view class="delete-picture" @click="delcloudImg(index)"
style="width: 40rpx;height: 40rpx;position: absolute;top: 0rpx;right: -6rpx;z-index: 999;">
<u-icon name="guanbi" color="#ccc" size="30" custom-prefix="custom-icon"></u-icon>
</view>
<u-image width="100%" height="100%" border-radius="20" mode="scaleToFill" @click="_previewImage(item)" :src="item"></u-image>
</view>
<view class="upload-icon" v-if="thumbnailUrls.length < 6" @click="uploadPictures">
<view class="disflex-center">
<view class="domeimg">
<u-icon custom-prefix="custom-icon" name="tupian" size="80" color="#ffffff">
</u-icon>
</view>
<view class="upload-text">上传图片</view>
</view>
</view>
</view>
<view class="tips-text">共<text
style="color: #FFCA85;">{{thumbnailUrls.length}}</text>张,还可上传{{9 - thumbnailUrls.length}}张
</view>
</view>
</template>
<script>
export default{
data(){
return{
uploadImg:{
thumbnailUrls:[]
},
thumbnailUrls:[]
}
},
methods:{
delcloudImg(keyVal) {
this.uploadImg.thumbnailUrls.splice(this.keyVal, 1);
this.thumbnailUrls.splice(this.keyVal, 1);
},
_previewImage(image) {
let imgArr = [];
imgArr.push(image);
uni.previewImage({
urls: imgArr,
current: imgArr[0]
});
},
uploadPictures() {
uni.chooseImage({
count: 6,
sizeType: ['original', 'compressed'],
success: (chooseImageRes) => {
uni.showLoading({
title: '上传中'
});
this.thumbnailUrls = this.thumbnailUrls.concat(chooseImageRes.tempFilePaths);
var imageData = this.thumbnailUrls
const tempFilePaths = chooseImageRes.tempFilePaths;
for (var i = 0; i < imageData.length; i++) {
const uploadTask = uni.uploadFile({
url: this.$http.baseURL + 'embroidery/aliOss/uploadCommodity',
filePath: tempFilePaths[0],
name: "file",
header: {
Authorization: uni.getStorageSync('_TOKEN')
},
success: (data) => {
if(data.statusCode == 200){
uni.hideLoading();
const back = JSON.parse(data.data);
var imgUrl = back.data;
console.log(imgUrl)
this.uploadImg.thumbnailUrls.push(imgUrl);
console.log(this.uploadImg.thumbnailUrls)
}else{
uni.showToast({
title: '上传失败',
icon: 'loading'
})
}
}
})
}
}
});
},
}
}
</script>
<style scoped lang="scss">
.four-img-flex {
display: flex;
flex-wrap: wrap;
.upload-img {
width: 100%;
display: flex;
flex-wrap: wrap;
margin-bottom: 12rpx;
.viewimg {
width: 140rpx;
height: 140rpx;
border: 2rpx solid $color-font-1;
border-radius: 20rpx;
display: flex;
justify-content: center;
align-items: center;
margin-right: 20rpx;
margin-bottom: 20rpx;
position: relative::v-deep {
.u-image {
border-radius: 20rpx !important;
.u-image__image {
border-radius: 20rpx !important;
}
}
}
}
.upload-icon {
width: 140rpx;
height: 140rpx;
background: $color-background-3;
border: 2px solid $color-font-1;
border-radius: 20rpx;
display: flex;
justify-content: center;
align-items: center;
.disflex-center {
.domeimg {
display: flex;
justify-content: center;
align-items: center;
}
.upload-text {
font-size: 26rpx;
color: #F2F2F2;
}
}
}
}
}
</style>