<view class="upload-img">
<u-form-item label-width="150">
<u-upload ref="iupload" :style="{opacity: evaluationData.length > 6 ? 0 : ''}"
width="150" height="150" :file-list="multipleImgs"
:action="httpUrl + '/common/uploadFile'" :customBtn="true" upload-text="上传图片"
:header="importHeaders" :max-count="6" :form-data="formData"
@on-success="onSuccessFn" :show-progress="false" delBgColor="#241e1a"
@on-remove="deleteImgs" @on-error="onErrorFn" :before-upload="beforeUpload">
<view class="upload-icon" slot="addBtn">
<view class="disflex-center">
<view class="domeimg">
<u-icon custom-prefix="custom-icon" name="tupian" size="64"
color="#ffffff">
</u-icon>
</view>
<view class="upload-text">上传图片</view>
</view>
</view>
</u-upload>
</u-form-item>
</view>
.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;
}
}
}
.delete-picture {
background-color: rgba($color: #000000, $alpha: 0.6);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
}
.upload-icon {
width: 150rpx;
height: 150rpx;
background: #241E1A;
border-radius: 20rpx;
display: flex;
justify-content: center;
align-items: center;
.disflex-center {
.domeimg {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20rpx;
}
.upload-text {
margin-top: 8rpx;
font-size: 26rpx;
letter-spacing: 2rpx;
color: #F2F2F2;
}
}
}
}
data() {
return {
httpUrl: API_URL,
importHeaders: {
Authorization: uni.getStorageSync('_TOKEN')
},
formData: {
type: 9
},
evaluationData: [],
multipleImgs: [],
tips: '请输入高度',
tipsWidth: '请输入宽度',
shts: false,
shtsWidth: false,
value: '',
valueWidth: ''
};
},
deleteImgs(index, lists, name) {
console.log(index, "index")
console.log(lists, "lists")
console.log(name, "name")
this.evaluationData.splice(index, 1);
lists.splice(index, 1);
},
beforeUpload() {
this.$refs.iupload.clear
this.$emit('uploadLoadingStart')
},
onSuccessFn(data, index, lists, name) {
const _this = this
console.log(data)
_this.evaluationData.push(data.data);
let a = setTimeout(() => {
_this.$emit('uploadLoadingEnd');
clearTimeout(a)
}, 500)
},
onErrorFn(res, index, lists, name) {
this.$emit('uploadLoadingEnd')
uni.showToast({
title: '上传失败,请稍后再试',
icon: 'none',
duration: 2000
});
}