<template>
|
<el-upload
|
v-model:file-list="fileList"
|
list-type="picture-card"
|
:on-preview="handlePictureCardPreview"
|
:on-remove="handleRemove"
|
:on-exceed="handleExceed"
|
:http-request="uploadImg"
|
:limit="props.limit"
|
:disabled="props.disabled"
|
>
|
<el-icon><Plus /></el-icon>
|
</el-upload>
|
|
<el-dialog v-model="dialogVisible">
|
<img w-full :src="dialogImageUrl" alt="Preview Image" />
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
import { Plus } from '@element-plus/icons-vue'
|
|
import { ElMessage } from 'element-plus'
|
import { upload } from '@/api/basicApi/index'
|
|
// import type { UploadProps } from 'element-plus'
|
import { getImage, setImage } from '@/utils/validate.js'
|
const props = defineProps({
|
imageList: {
|
type: String,
|
default: '',
|
},
|
limit: {
|
type: Number,
|
},
|
disabled:{
|
type: Boolean,
|
default:false,
|
},
|
})
|
const fileList = ref([])
|
const file = ref([])
|
|
const emit = defineEmits(['uploadData'])
|
// const imageUrl = ref('')
|
|
const dialogImageUrl = ref('')
|
const dialogVisible = ref(false)
|
|
const handleRemove = (_, uploadFiles) => {
|
file.value = uploadFiles.map((item)=>{return item.url})
|
emit('uploadData', file.value)
|
}
|
|
const handlePictureCardPreview = (uploadFile) => {
|
dialogImageUrl.value = uploadFile.url
|
dialogVisible.value = true
|
}
|
//超出限制
|
const handleExceed = () => {
|
ElMessage({ message: `只能上传${props.limit}张图片`, type: 'error' })
|
}
|
//上传图片调用接口
|
const uploadImg = async (params) => {
|
//建立表单，请求参数传表单形式
|
let form = new FormData();
|
form.append("file1", params.file);
|
form.append("fileId", params.file.lastModified);
|
form.append("path", 'hydropower');
|
//发出上传文件请求
|
let res = await upload().uploadFile(form)
|
if(res.code == 200){
|
//返回的图片网络地址传给form
|
ElMessage({ message: '上传图片成功', type: 'success' })
|
file.value.push(res.data.newFileName)
|
emit('uploadData', setImage(file.value))
|
}
|
}
|
//监听props.image
|
watch(props, (newvalue)=>{
|
let newList = ''
|
if(newvalue.imageList!='' && newvalue.imageList != null){
|
newList = getImage(newvalue.imageList).join(',')
|
}
|
if( newList != ''){
|
//判断是否加上PREURL前缀
|
if(file.value.join(',') != newList){
|
let list = []
|
newList.split(',').forEach((item)=>{
|
list.push({
|
url: item
|
})
|
})
|
fileList.value = list
|
|
file.value = newList.split(',')
|
}
|
}else{
|
fileList.value = [] //父组件image从有值到空变化，也要清空一遍组件中的值
|
file.value = []
|
}
|
},{immediate:true})
|
</script>
|
