<template>
<view class="yh-uploadimage">
<u-row gutter="10">
<u-col v-if="!showUploadList" :span="gridNumber" v-for="(item, index) in fileList" class="col">
<view class="pre-item" :key="index">
<image @tap="previewImage(index)" class="pre-item-image" :src="FormatDFSUrl(item.url)"
mode="aspectFill"></image>
<view class="del u-f-ac u-f-ajc" @click="removeFun(index)" v-if="!disabled">
<u-icon name="minus" size="26" color="white"></u-icon>
</view>
</view>
</u-col>
<u-col :span="gridNumber" v-if="fileList&&fileList.length<limitNumber&&!disabled" class="col">
<u-upload :custom-btn="true" ref="uUpload" :show-upload-list="showUploadList" :action="action"
:max-count="limitNumber" :multiple="limitNumber>1?true:false" @on-success="successFun">
<view slot="addBtn" class="slot-btn u-f-ac u-f-ajc" hover-class="slot-btn__hover"
hover-stay-time="150">
<view>
<u-icon name="camera-fill" size="60" color="#c0c4cc"></u-icon>
<u-parse class="placeholder" v-html="placeholderText"> </u-parse>
</view>
</view>
</u-upload>
</u-col>
</u-row>
<u-toast ref="uToast" />
</view>
</template>
<script>
import {
media_file_upload_url
} from '@/common/api/auth.js'
export default {
name: "yh-uploadimage",
data() {
return {
limitNumber: 2,
showUploadList: false,
placeholderText: "请上传图片",
action: "", //上传地址
limitType: ['png', 'jpg', 'jpeg', 'webp', 'gif'],
upload_size: "10",
currentCode: "", //文件服务器Code
currentPath: "/upload", //文件存放目录
fileList: [],
gridNumber:4
}
},
props: {
value: {
type: String
}, //传入的图片集合，多个之间用逗号分隔
grid: {
type: Number
}, //栅格占位 格数为0-12
code: {
type: String
}, //文件服务器Code
uploadpath: {
type: String,
default: '/upload'
}, //文件存放目录
filetypes: {
type: Array
}, //文件类型，多个逗号分隔
limit: {
type: Number,
default: 2,
}, //上传文件数量限制
placeholder: {
type: String,
}, //单个文件大小限制，单位M
size: {
type: String,
default: "10"
}, //单个文件大小限制，单位M
saveDb: {
type: Boolean,
default: false
}, //是否保存到数据库
disabled: {
type: Boolean,
default: false
}, //是否禁用
/* preview: {
type: Boolean,
default: false,
}, //是否预览（只读） */
single: {
type: Boolean,
default: false
}, //是否单个图片，相当于limit=1，但是优先级大于limit
uploadcallback: {
type: Function
}, //上传完成的回调
fileRename: {
type: String,
}, //文件重命名
category: {
type: Number
}, //上传文件分类（0=系统普通文件，1=特定的目录，2=超越code的上传）
},
created() {
this.initFun();
},
onPullDownRefresh() {},
watch: {
value() {
this.uploadInit()
},
fileList() {
let res = ""
if (this.fileList && this.fileList.length) {
this.fileList.map(el => {
res += el.url + ","
})
res = res.substring(0, res.length - 1)
}
this.$emit("input", res);
},
},
methods: {
successFun(data, index, lists) {
this.fileList.push({
url: data.response.path
})
/* console.log(data)
console.log(index)
console.log(lists) */
}, //上传成功
uploadInit() {
if (this.value) {
let curFilePathList = this.value.split(",");
if (curFilePathList) {
let fileListArr = [];
for (let i = 0; i < curFilePathList.length; i++) {
let item = curFilePathList[i];
fileListArr.push({
url: item,
});
}
this.fileList = fileListArr;
}
} else {
this.fileList = [];
}
},
initFun() {
this.uploadInit();
if (this.grid) {
this.gridNumber = this.grid;
}
if (this.limit) {
this.limitNumber = this.limit;
}
if (this.single) {
this.limitNumber = 1
}
if (this.size) {
this.upload_size = this.size * 1024 * 1024;
}
if (this.placeholder) {
this.placeholderText = this.placeholder;
}
if (this.filetypes) {
this.limitType = this.filetypes;
}
if (this.code) {
this.currentCode = this.code;
} else {
this.$message({
message: "[图片上传]未传入系统Code",
type: "error"
});
return;
}
if (this.uploadpath) {
this.currentPath = this.uploadpath;
}
let $fileReName = '';
if (this.fileRename)
$fileReName = `&fileRename=${this.fileRename}`;
this.action =
`${media_file_upload_url}?code=${this.currentCode}&path=${this.currentPath}&saveDb=${this.saveDb}&category=${this.category}${$fileReName}`;
},
removeFun(index) {
uni.showModal({
title: "提示",
content: "是否要删除该图片",
success: (res) => {
if (res.confirm) {
this.fileList.splice(index, 1);
}
}
})
//this.fileList.splice(index,1);
//this.$refs.uUpload.remove(index)
},
previewImage(index) {
var imgArr = [];
this.fileList.map(el => {
imgArr.push(this.FormatDFSUrl(el.url));
})
//预览图片
uni.previewImage({
loop: true,
indicator: "default",
current: index,
urls: imgArr
});
},
}
}
</script>
<style lang="scss" scoped>
.col{
margin-top: 10rpx;
}
/deep/ .u-upload {
height: 180rpx;
overflow: hidden;
width: 100%;
margin-top: -12rpx;
}
/deep/ .u-upload>uni-view {
width: 100%;
height: 100%;
text-align: center;
}
.slot-btn {
height: 180rpx;
background: rgb(244, 245, 246);
text-align: center;
padding: 0 20rpx;
.placeholder {
font-size: 24rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #CCCCCC;
}
}
.slot-btn__hover {
background-color: rgb(235, 236, 238);
}
.pre-box {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.pre-item {
height: 180rpx;
position: relative;
margin-bottom: 10rpx;
}
.pre-item-image {
width: 100%;
height: 100%;
}
.del {
position: absolute;
top: -8rpx;
left: z;
right: -10rpx;
z-index: 11;
background: red;
width: 32rpx;
height: 32rpx;
border-radius: 50%;
text-align: center;
}
</style>
使用：
<yh-uploadimage code="zsbm" placeholder="请上传图片" :limit="4" v-model="formData.pic"></yh-uploadimage>