You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
154 lines
3.4 KiB
154 lines
3.4 KiB
<template>
|
|
<view class="upload-images">
|
|
<view class="upload-image-item"
|
|
:style="{order: uploadButton == 'front' ? '1' : '2'}"
|
|
@click="uploadImage"
|
|
v-if="(count == -1) || (image_list.length < count)">
|
|
<text class="lf-iconfont lf-icon-jia upload-image-item-after"></text>
|
|
</view>
|
|
<view class="upload-image-item"
|
|
:style="{order: uploadButton == 'front' ? '2' : '1'}"
|
|
v-for="(item, index) in image_list" :key="index"
|
|
@click="lookImage(index)">
|
|
<image :src="item" mode="aspectFill"></image>
|
|
<view class="remove-image" @click.stop="removeInage(index)" v-if="showDelete">
|
|
<text class="lf-iconfont lf-icon-shanchu"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
uploadButton: {
|
|
type: String, // 上传按钮显示在哪里，front图片前面，behind图片后面
|
|
default: 'front'
|
|
},
|
|
showDelete: {
|
|
type: Boolean, // 是否可删除图片
|
|
default: true
|
|
},
|
|
count: {
|
|
type: Number, // 可上传多少张图, 默认6张
|
|
default: 6
|
|
},
|
|
size: {
|
|
type: Number, // 限制单张图上传大小，单位M
|
|
default: 10
|
|
},
|
|
drag: {
|
|
type: Boolean, // TODO 是否可拖拽排序图片
|
|
default: false
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
image_list: []
|
|
}
|
|
},
|
|
onLoad(){
|
|
|
|
},
|
|
methods: {
|
|
// 上传凭证图片
|
|
uploadImage(){
|
|
let current_count = this.$props.count - this.image_list.length;
|
|
if(this.$props.count == -1){
|
|
current_count = 9;
|
|
}
|
|
if(current_count == 0) return;
|
|
uni.chooseImage({
|
|
count: current_count,
|
|
complete: result => {
|
|
if(result.errMsg == "chooseImage:fail cancel"){
|
|
return; // 取消选择图片
|
|
}
|
|
let tempFiles = result.tempFiles;
|
|
let image_list = [];
|
|
let overstep = false;
|
|
tempFiles.map(item => {
|
|
// 上传的图片大小
|
|
let size = Math.floor((Number(this.$props.size) || 1) * 1024 * 1024);
|
|
if(item.size < size){
|
|
image_list.push(item.path);
|
|
}else{
|
|
overstep = true;
|
|
}
|
|
})
|
|
if(overstep){
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '您上传的图片含有超出10M大小的限制，请优化大小后再上传！',
|
|
showCancel: false
|
|
})
|
|
}
|
|
this.image_list.push(...image_list);
|
|
}
|
|
})
|
|
},
|
|
// 预览图片
|
|
lookImage(current){
|
|
if(this.image_list.length <= 0) return;
|
|
this.$u.throttle(() => {
|
|
uni.previewImage({
|
|
urls: this.image_list,
|
|
current: current
|
|
});
|
|
}, 500);
|
|
},
|
|
// 移除图片
|
|
removeInage(current){
|
|
this.image_list.splice(current, 1);
|
|
},
|
|
// 返回已上传的图片列表
|
|
getUploadImage(){
|
|
return this.image_list;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped="scoped">
|
|
.upload-images{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 30rpx;
|
|
margin-bottom: 18rpx;
|
|
.upload-image-item{
|
|
width: 220rpx;
|
|
height: 220rpx;
|
|
background: #DDDDDD;
|
|
position: relative;
|
|
margin-right: 12rpx;
|
|
&:nth-child(3n){
|
|
margin-right: 0rpx;
|
|
}
|
|
&:nth-child(n+4){
|
|
margin-top: 12rpx;
|
|
}
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.remove-image{
|
|
position: absolute;
|
|
right: -4rpx;
|
|
top: -18rpx;
|
|
color: #e74c3c;
|
|
font-size: 40rpx;
|
|
padding: 8rpx;
|
|
}
|
|
}
|
|
.upload-image-item-after{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 60rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
</style>
|