Element Plus图片上传组件二次扩展
Element Plus 的图片上传组件主要通过 <el-upload> 实现，该组件支持多种配置和功能，如文件类型限制、文件大小限制、自动上传、手动上传、预览、删除等。以下是对 Element Plus 图片上传组件的详细介绍和使用示例：
功能概述
- 文件类型限制：可以指定允许上传的文件类型，如图片（jpg, png等）。
- 文件大小限制：可以限制上传文件的大小。
- 自动上传：选择文件后自动上传到服务器。
- 手动上传：选择文件后不立即上传，而是通过按钮手动触发上传。
- 预览：上传前或上传后可以预览图片。
- 删除：已上传的文件可以删除。
使用示例
以下是一个基本的 Element Plus 图片上传组件的使用示例，包括前端 Vue 组件代码和后端 Spring Boot 接口代码。
前端 Vue 组件基本调用
<template>
<el-upload
class="upload-demo"
action="http://localhost:8080/upload/image" <!-- 后端接收上传文件的接口 -->
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false" <!-- 设置为false，则不自动上传 -->
:http-request="customUpload"
list-type="picture-card"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<el-dialog
title="预览"
:visible.sync="dialogVisible"
width="30%"
>
<img :src="dialogImageUrl" class="dialog-image" />
</el-dialog>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const fileList = ref([]);
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
const handlePreview = (file) => {
dialogImageUrl.value = file.url;
dialogVisible.value = true;
};
const handleRemove = (file, fileList) => {
console.log(file, fileList);
};
const customUpload = (options) => {
// 这里可以自定义上传逻辑，比如使用axios发送请求
// 这里只是简单模拟
console.log('自定义上传', options.file);
// 假设上传成功，更新fileList
// fileList.value.push({ name: options.file.name, url: '上传后的文件URL' });
};
const submitUpload = () => {
// 这里可以调用自定义的上传函数，或者将fileList中的文件逐个上传
// 这里只是示例，没有实现具体的上传逻辑
console.log('提交上传', fileList.value);
};
return {
fileList,
dialogImageUrl,
dialogVisible,
handlePreview,
handleRemove,
customUpload,
submitUpload,
};
},
};
</script>
<style>
.dialog-image {
width: 100%;
}
</style>DIY可视化二次扩展
输入上传式图片组件
<template>
<el-input
type="text"
ref="formImg"
:class="url && type == 'image' ? 'diygw-img-input' : ''"
v-model="url"
clearable
:placeholder="'请选择' + title"
>
<template #append>
<el-image
:src="url"
v-if="url && type == 'image'"
style="width: 30px; height: 30px"
:preview-teleported="true"
:preview-src-list="[url]"
></el-image>
<el-button @click="handleStorage"> 选择{{ title }} </el-button>
</template>
</el-input>
<diy-storage ref="storage" :type="type" :accept="accept" :limit="1" @confirm="getAttachmentFileList"></diy-storage>
</template>
<script lang="ts" setup>
import { nextTick, ref, defineEmits, watch } from 'vue';
import { useVModel } from '@vueuse/core';
import DiyStorage from './storage.vue';
const props = defineProps({
// 外部v-model值
modelValue: {
type: String,
default: '',
},
title: {
type: String,
default: '',
},
type: {
type: String,
default: 'image',
},
accept: {
type: String,
default: 'image/*',
},
});
const storage = ref(null);
const emit = defineEmits(['update:modelValue', 'change', 'blur']);
const url = useVModel(props, 'modelValue', emit);
const handleStorage = () => {
nextTick(() => {
storage.value!.handleStorageDlg('', '上传' + props.title);
});
};
watch(url, () => {
emit('change');
emit('blur');
});
const formImg: EmptyObjectType = ref(null);
// 获取商品相册资源
const getAttachmentFileList = (files = <any>[]) => {
if (!files.length) {
return;
}
url.value = files[0].url;
nextTick(() => {
formImg.value?.input.focus();
formImg.value?.input.blur();
});
};
</script>
<style lang="scss" scoped>
.diygw-img-input ::v-deep(.el-input-group__append) {
padding-left: 0px;
}
.diygw-img-input {
::v-deep(.el-image) {
margin-right: 15px;
}
}
.sortable-ghost {
opacity: 0;
}
</style>
多图式上传
<template>
<div style="line-height: 0; width: 100%" class="flex justify-start">
<VueDraggable
tag="ul"
v-bind="{ animation: 200, disabled: false, ghostClass: 'ghost' }"
v-model="imageList"
class="el-upload-list el-upload-list--picture-card"
group="subform"
item-key="url"
>
<li v-for="(item, index) in imageList" class="el-upload-list__item" :style="`width:${width}px; height:${height}px;`">
<el-image :style="`width:100%; height:100%`" :src="item" fit="contain" />
<span v-show="!state.isdrag" :class="{ 'el-upload-list__item-actions': true, 'diy-cm': isMove }">
<SvgIcon style="color: #fff" name="ele-Plus" class="margin-right" @click="handleStorage(index)" :size="20" />
<SvgIcon style="color: #fff" name="ele-Delete" @click="remove(index)" :size="20" />
</span>
</li>
</VueDraggable>
<div
v-if="limit == 0 || (imageList.length == 0 && limit == 1)"
tabindex="0"
style="margin-bottom: 8px"
class="el-upload el-upload--picture-card"
:style="`width:${width}px; height:${height}px;`"
@click="handleStorage(-1)"
>
<SvgIcon name="ele-Plus" :size="20" />
</div>
<diy-storage ref="storage" :limit="limit" @confirm="getAttachmentFileList"></diy-storage>
</div>
</template>
<script setup>
import { nextTick, ref, reactive } from 'vue';
import { useVModel } from '@vueuse/core';
import { VueDraggable } from 'vue-draggable-plus';
import { ElMessageBox, useFormItem } from 'element-plus';
import DiyStorage from './storage.vue';
const { formItem } = useFormItem();
const props = defineProps({
// 外部v-model值
modelValue: {
type: Array,
default: () => [],
},
width: {
default: 80,
},
height: {
default: 80,
},
isMove: {
default: true,
},
limit: {
default: 0,
},
customer: {
type: Object,
required: false,
default: () => {},
},
contractId: {
required: false,
default: '',
},
storageType: {
type: String,
required: false,
default: '',
},
});
const state = reactive({
isdrag: false,
index: -1,
});
const storage = ref();
const emit = defineEmits(['update:modelValue']);
const imageList = useVModel(props, 'modelValue', emit);
const handleStorage = (index = -1) => {
state.index = index;
nextTick(() => {
storage.value.handleStorageDlg('', '上传图片');
});
};
// 获取商品相册资源
const getAttachmentFileList = (files = []) => {
if (!files.length) {
return;
}
if (state.index != -1) {
imageList.value[state.index] = files[state.index].url;
} else {
files.forEach((item) => {
imageList.value.push(item.url);
});
}
nextTick(() => {
formItem?.validate?.('blur').catch((err) => {
console.log(err);
});
formItem?.validate?.('change').catch((err) => {
console.log(err);
});
});
};
const remove = (index = -1) => {
ElMessageBox({
message: '是否删除该文件?',
title: '警告',
showCancelButton: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(function () {
imageList.value.splice(index, 1);
});
};
</script>
<style lang="scss" scoped>
.sortable-ghost {
opacity: 0;
}
</style>
上传组件调用
<template>
<el-dialog :title="title" top="5vh" v-model="visible" append-to-body center width="800px">
<div class="flex storages">
<div class="categorys diy-tree file-border flex flex-direction-column">
<el-button type="primary" @click="handleAdd()">新增目录</el-button>
<div class="mt-1 text-center" plain :class="[!form.parentId ? 'selected' : '']" @click="selectCategory('')">全部</div>
<div
class="mt-1 p-1 text-center"
plain
:key="item"
:class="[form.parentId == item.storageId ? 'selected' : '']"
@click="selectCategory(item.storageId)"
v-for="item in categorys"
>
{{ item.name }}
</div>
</div>
<div class="flex1 file-border">
<!-- 文件列表开始 -->
<div class="flex justify-between">
<div class="diy-mb-20">
<el-input
v-model="form.name"
label-width="0px"
placeholder="输入名称搜索"
style="width: 250px"
@keyup.enter.native="handleSearch()"
@clear="handleSearch()"
:clearable="true"
>
<template #suffix>
<SvgIcon @click="handleSearch" name="ele-Search" :size="20" />
</template>
</el-input>
</div>
<diy-upload
ref="upload"
:upload-tip="uploadConfig.uploadTip"
:multiple="uploadConfig.multiple"
:type="type"
:accept="accept"
:limit="uploadConfig.limit"
:parent-id="form.parentId"
@confirm="_getUploadFileList"
></diy-upload>
</div>
<div class="files" :max="limit !== 0 ? limit : 100">
<div class="file-list" v-loading="loading">
<div :key="index" v-for="(item, index) in currentTableData" class="item" :data-label="item.name" :class="item.selectclz">
<div
class="file-image"
:style="{
backgroundImage: 'url(' + getImageThumb(item) + ')',
}"
@click="selectFile(item)"
></div>
<div class="file-name">
{{ item.name }}
</div>
<div class="mask" @click="selectFile(item)">
<SvgIcon name="ele-Check" :size="20" />
</div>
<div class="el-dropdown" @click="handleDelete(item.storageId)">
<SvgIcon class="delete" name="ele-Delete" :size="20" />
</div>
</div>
</div>
</div>
<!-- 翻页开始 -->
<diy-pagefooter
style="margin: 0; padding: 20px 0 0 0"
:current="page.current"
:size="page.size"
:total="page.total"
:is-size="false"
@change="handlePaginationChange"
/>
</div>
</div>
<!-- 确认,取消 -->
<template #footer v-if="isSelect == '1'" class="dialog-footer">
<div style="float: left; font-size: 13px">
<span v-if="checkList.length > limit && limit !== 0" style="color: #f56c6c">
当前已选 {{ checkList.length }} 个，最多允许选择 {{ limit }} 个文件
</span>
<span v-else>当前已选 {{ checkList.length }} 个文件</span>
</div>
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" :loading="loadingCollection" :disabled="checkList.length > limit && limit !== 0" @click="handleConfirm"
>确定</el-button
>
</template>
</el-dialog>
<el-dialog :title="nameMap[nameStatus]" v-model="nameFormVisible" append-to-body center top="5vh" width="600px">
<el-form :model="nameForm" :rules="rules" ref="refform" label-width="50px" label-position="left" @submit.native.prevent>
<el-form-item label="名称" prop="name">
<el-input v-model="nameForm.name" placeholder="请输入目录名称" @keyup.enter.native="nameStatus === 'add' ? add() : rename()" ref="input" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="nameFormVisible = false">取消</el-button>
<el-button v-if="nameStatus === 'add'" type="primary" :loading="dialogLoading" @click="add">确定</el-button>
<el-button v-else type="primary" :loading="dialogLoading" @click="rename">修改</el-button>
</template>
</el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, nextTick, toRefs } from 'vue';
import { listData, listAllData, addData, delData } from '@/api/index';
import { ElMessageBox, ElMessage } from 'element-plus';
import DiyUpload from './upload.vue';
import DiyPagefooter from './pagefooter.vue';
export default defineComponent({
name: 'DiyStorage',
components: {
DiyUpload,
DiyPagefooter,
},
props: {
type: {
default: 'image',
},
accept: {
default: 'image/*',
},
// 最大选择数(0表示不限制)
limit: {
type: Number,
required: false,
default: 0,
},
isSelect: {
default: '1',
},
},
setup(props, { emit }) {
const data = reactive({
baseUrl: '',
title: '',
isLoad: false,
icontype: 'default',
visible: false,
loading: false,
uploadConfig: {
uploadTip: '请选择文件进行上传，',
multiple: true,
accept: 'image/*',
limit: 0,
type: 'image',
replace: false,
},
storageType: props.type,
source: '',
loadingCollection: false,
checkList: [],
categorys: [],
syscategorys: [],
currentTableData: [],
currentSysTableData: [],
searchSysTableData: [],
dialogLoading: false,
nameForm: {
type: '',
name: undefined,
parentId: undefined,
},
nameFormVisible: false,
nameStatus: 'edit',
nameMap: {
edit: '重命名',
add: '新增目录',
},
iconfonturl: '',
rules: {
name: [
{
required: true,
message: '目录名称不能为空',
trigger: 'blur',
},
{
max: 255,
message: '长度不能大于 255 个字符',
trigger: 'blur',
},
],
},
form: {
name: undefined,
parentId: undefined,
order_type: 'desc',
order_field: 'storageId',
},
sysform: {
parentId: 'icon1',
name: '',
type: 'system',
},
page: {
current: 1,
size: 15,
total: 0,
},
});
const upload = ref(null);
const getImageThumb = (item: any) => {
if (item.type == 'mp3') {
return '/static/images/mp3.png';
} else if (item.type == 'mp4') {
return '/static/images/mp3.png';
} else if (item.type == 'image' || item.type == 'scene') {
return item.url;
} else {
return '/static/images/file.png';
}
};
const handleStorageDlg = (source = '', title = '') => {
data.title = title ? title : '文件管理';
// if (type == 'mp3') {
// data.uploadConfig.accept = '.mp3';
// } else if (type == 'mp4') {
// data.uploadConfig.accept = '.mp4';
// } else {
// data.uploadConfig.accept = 'image/*';
// }
data.visible = true;
data.storageType = props.type;
data.source = source;
data.checkList = [];
data.currentTableData.forEach((item: any) => {
item.selectclz = '';
});
if (!data.isLoad) {
data.loadingCollection = false;
data.currentTableData = [];
data.uploadConfig.type = props.type;
handleSubmit();
nextTick(() => {
getStorageDirectory();
if (upload.value) {
upload.value?.handleClose();
}
});
}
};
const handlePaginationChange = (val: any) => {
data.page = val;
nextTick(() => {
handleSubmit();
});
};
const handleSearch = () => {
data.page.current = 1;
handleSubmit();
};
const handleSubmit = () => {
data.loading = true;
listData('/sys/storage', {
...data.form,
type: data.storageType,
pageNum: data.page.current,
pageSize: data.page.size,
})
.then((res) => {
data.currentTableData = res.rows || [];
data.page.total = res.total;
data.isLoad = true;
})
.finally(() => {
data.loading = false;
});
};
const handleSysSubmit = () => {
data.loading = true;
listData('/sys/storage', {
...data.sysform,
})
.then((res) => {
data.currentSysTableData = res.rows || [];
data.searchSysTableData = res.rows || [];
})
.finally(() => {
data.loading = false;
});
};
const handleSyscatesSubmit = () => {
data.loading = true;
listData('/sys/storage', {
...data.sysform,
})
.then((res) => {
data.syscategorys = res.rows || [];
data.sysform.type = 'system';
data.sysform.parentId = res.rows[0].storageId;
handleSysSubmit();
})
.finally(() => {
data.loading = false;
});
};
const handleSysSearch = () => {
let findData = data.currentSysTableData.filter((item: any) => {
return item.name.indexOf(data.sysform.name) >= 0 || item.cname.indexOf(data.sysform.name) >= 0;
});
data.searchSysTableData = findData;
};
const handleAllSearch = () => {
if (data.loading) {
ElMessage.error('点击过快，正在加载数据');
return;
}
data.sysform.parentId = '';
handleSysSubmit();
};
const handleConfirm = () => {
if (data.checkList.length <= 0) {
emit('confirm', [], data.source);
data.visible = false;
return;
}
let checkList = data.checkList;
// let finddata = data.currentTableData.filter((item) => {
// return checkList.includes(item.storageId);
// });
// let finddata2 = data.currentSysTableData.filter((item) => {
// return checkList.includes(item.storageId);
// });
// finddata = finddata.concat(finddata2)
data.loadingCollection = false;
//data.checkList = [];
data.visible = false;
emit('confirm', checkList || [], data.source);
};
// 上传文件
// const handleUpload = () => {
// upload.value.handleUploadDlg();
// };
const selectCategory = (id: any) => {
if (data.loading) {
ElMessage.error('点击过快，正在加载数据');
return;
}
data.form.parentId = id;
handleSubmit();
};
const selectSystemCategory = (item: any) => {
if (data.loading) {
ElMessage.error('点击过快，正在加载数据');
return;
}
data.sysform.name = '';
data.iconfonturl = item.url;
data.sysform.parentId = item.storageId;
handleSysSubmit();
};
const selectFile = (item: any) => {
if (props.limit === 1) {
data.currentSysTableData.forEach((item: any) => {
item.selectclz = '';
});
data.currentTableData.forEach((item: any) => {
item.selectclz = '';
});
let index = data.checkList.findIndex((checkitem: any) => {
return checkitem == item.storageId;
});
if (index >= 0) {
data.checkList.splice(index, 1);
item.selectclz = '';
} else if (data.checkList.length > 0) {
data.checkList.splice(0, 1, item);
item.selectclz = 'active';
} else {
data.checkList.push(item);
item.selectclz = 'active';
}
} else {
let index = data.checkList.findIndex((checkitem: any) => {
return checkitem.storageId == item.storageId;
});
if (index >= 0) {
data.checkList.splice(index, 1);
item.selectclz = '';
} else {
data.checkList.push(item);
item.selectclz = 'active';
}
}
};
// 批量删除
const handleDelete = (val: any) => {
const storageId = val ? [val] : data.checkList;
if (storageId.length === 0) {
ElMessage.error('请选择要操作的数据');
return;
}
ElMessageBox.confirm('确定要执行该操作吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: false,
})
.then(() => {
delData('/sys/storage', storageId).then(() => {
for (let i = data.currentTableData.length - 1; i >= 0; i--) {
if (storageId.indexOf(data.currentTableData[i].storageId) !== -1) {
data.currentTableData.splice(i, 1);
}
}
ElMessage.success('操作成功');
});
})
.catch(() => {});
};
// 文件上传成功后处理
const _getUploadFileList = (files: any) => {
for (const value of files) {
let stroage = value.response.data;
let index = data.currentTableData.findIndex((item: any) => {
return item.url == stroage.url;
});
if (index == 0) {
continue;
}
if (index > 0) {
data.currentTableData.splice(index, 1);
}
data.currentTableData.splice(0, 0, stroage);
}
};
const refform = ref();
const refinput = ref();
// 获取可选择目录
const getStorageDirectory = () => {
//if (!this.directoryList.length) {
listAllData('/sys/storage', { type: 'category' }).then((res) => {
data.categorys = res.rows;
});
};
const add = () => {
refform.value.validate((valid: boolean) => {
if (valid) {
data.dialogLoading = true;
data.nameForm.type = 'category';
addData('/sys/storage', { ...data.nameForm })
.then((res) => {
data.categorys.unshift({
...res.data,
is_default: 0,
});
//getStorageDirectory();
data.nameFormVisible = false;
ElMessage.success('操作成功');
})
.catch(() => {
data.dialogLoading = false;
});
}
});
};
const rename = () => {
refform.value.validate((valid: boolean) => {
if (valid) {
data.dialogLoading = true;
// renameStorageItem(data.nameForm.storageId, data.nameForm.name)
// .then(res => {
// data.currentTableData[data.nameForm.index].name = data.nameForm.name
// // data.directoryList = []
// getStorageDirectory()
// data.nameFormVisible = false
// data.$message.success('操作成功')
// })
// .catch(() => {
// data.dialogLoading = false
// })
}
});
};
const handleAdd = () => {
data.nameForm['name'] = undefined;
data.nameForm['parentId'] = data.form.parentId;
data.dialogLoading = false;
data.nameStatus = 'add';
data.nameFormVisible = true;
nextTick(() => {
refform.value.clearValidate();
});
};
// for(let i=1 ;i<=9;i++){
// data.syscategorys.push({
// id:'icon'+i,
// name:'图标库'+i
// })
// }
const handleClick = () => {
if (data.syscategorys.length == 0 && data.icontype == 'system') {
data.sysform.type = 'systemcategorys';
handleSyscatesSubmit();
}
};
return {
refform,
refinput,
selectSystemCategory,
rename,
add,
handleAdd,
handleClick,
...toRefs(data),
_getUploadFileList,
selectCategory,
getImageThumb,
selectFile,
handleDelete,
handleSearch,
handleAllSearch,
handleConfirm,
handlePaginationChange,
handleStorageDlg,
handleSysSearch,
};
},
});
</script>
<style>
.storages .el-input__suffix {
top: 5px;
height: auto;
}
</style>
<style lang="scss" scoped>
.breadcrumb {
border: 1px solid #dcdfe6;
padding: 10px !important;
}
.files {
height: 50vh;
}
.file-height {
min-height: calc(40vw - 190px);
}
.file-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
:deep(.el-loading-mask) {
background-color: transparent;
}
}
.mt-1 {
margin-top: 0.25rem;
}
.p-1 {
padding: 0.25rem;
}
.delete {
color: #fff;
}
.file-list .item {
flex: none;
position: relative;
width: calc(20% - 20px);
margin: 10px;
text-align: center;
vertical-align: middle;
.file-image {
width: 100%;
height: 100%;
background-color: #eee;
border-radius: 4px;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
position: absolute;
left: 0;
top: 0;
}
&:before {
content: '';
display: inline-block;
padding-bottom: 100%;
width: 0.1px;
vertical-align: middle;
}
.file-name {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
line-height: 34px;
height: 34px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
text-align: center;
z-index: 2;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
}
.mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 5;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
display: none;
width: 100%;
height: 100%;
color: #fff;
font-size: 40px;
background: rgba(66, 139, 202, 0.8);
}
.el-dropdown {
position: absolute;
width: 34px;
line-height: 34px;
text-align: center;
background-color: #3296fa;
cursor: pointer;
bottom: 0;
right: 0;
z-index: 6;
display: none;
}
&:hover {
&:after {
position: absolute;
bottom: -20px;
left: 0px;
position: absolute;
padding: 3px 5px;
font-size: 12px;
font-weight: 700;
color: #fff;
white-space: nowrap;
background-color: #006eff;
border-radius: 3px;
content: attr(data-label);
}
.el-dropdown {
display: block;
}
}
&.active {
.mask {
display: flex;
align-items: center;
justify-content: center;
}
}
}
.brother-showing i {
width: 16px;
}
.diy-mb-5 {
margin-bottom: 5px !important;
}
.diy-tree {
width: 200px;
}
.file-border {
border: 1px solid #dcdfe6;
padding: 10px;
:deep(.el-form-item__content) {
margin-left: 0 !important;
}
.selected {
border: 1px solid var(--el-color-primary);
border-radius: 3px;
color: var(--el-color-primary);
}
}
.tree-scroll {
overflow: auto;
padding-bottom: 1px;
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
.diy-table {
display: table-row;
}
.diy-cell {
display: table-cell;
}
</style>