87 lines
1.9 KiB
Vue
87 lines
1.9 KiB
Vue
|
<template>
|
|||
|
|
<el-upload
|
|||
|
|
ref="upload"
|
|||
|
|
class="upload-demo"
|
|||
|
|
:limit="props.limit"
|
|||
|
|
:auto-upload="false"
|
|||
|
|
:file-list="fileList"
|
|||
|
|
:on-change="fileChange"
|
|||
|
|
:before-remove="handleDelFile"
|
|||
|
|
>
|
|||
|
|
<el-button type="primary" :disabled="fileList.length == 5">点击上传</el-button>
|
|||
|
|
<template #tip>
|
|||
|
|
<div v-if="props.format.length" class="el-upload__tip">只能上传{{ props.format.join() }} 文件，且不超过20MB</div>
|
|||
|
|
</template>
|
|||
|
|
</el-upload>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, watch } from 'vue';
|
|||
|
|
import { ElMessage } from 'element-plus';
|
|||
|
|
|
|||
|
|
const emit = defineEmits(['update:list']);
|
|||
|
|
const props = defineProps({
|
|||
|
|
list: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => [],
|
|||
|
|
},
|
|||
|
|
limit: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 5,
|
|||
|
|
},
|
|||
|
|
format: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => [],
|
|||
|
|
},
|
|||
|
|
size: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 20,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/* --------------- data --------------- */
|
|||
|
|
// #region
|
|||
|
|
|
|||
|
|
const fileList = ref([]);
|
|||
|
|
watch(
|
|||
|
|
() => props.list,
|
|||
|
|
(val) => {
|
|||
|
|
fileList.value = val;
|
|||
|
|
},
|
|||
|
|
{ deep: true, immediate: true }
|
|||
|
|
);
|
|||
|
|
// #endregion
|
|||
|
|
|
|||
|
|
/* --------------- methods --------------- */
|
|||
|
|
// #region
|
|||
|
|
|
|||
|
|
function fileChange(file, list) {
|
|||
|
|
let formatReg = true;
|
|||
|
|
if (props.format.length > 0) {
|
|||
|
|
formatReg = props.format.includes(file.name.slice(file.name.lastIndexOf('.') + 1));
|
|||
|
|
}
|
|||
|
|
const fileSize = file.size / 1024 / 1024 < props.size;
|
|||
|
|
if (!formatReg) {
|
|||
|
|
ElMessage.error(`上传文件格式不正确，仅支持${props.format.join('/ ')}格式`);
|
|||
|
|
delAttr(file.uid, list);
|
|||
|
|
}
|
|||
|
|
if (!fileSize) {
|
|||
|
|
ElMessage.error(`上传文件大小不能超过${props.size}MB`);
|
|||
|
|
delAttr(file.uid, list);
|
|||
|
|
}
|
|||
|
|
fileList.value = list;
|
|||
|
|
}
|
|||
|
|
function handleDelFile(file) {
|
|||
|
|
delAttr(file.uid, fileList.value);
|
|||
|
|
}
|
|||
|
|
function delAttr(id, list = []) {
|
|||
|
|
if (!id || !list) return false;
|
|||
|
|
let i = list.findIndex((v) => v.uid == id);
|
|||
|
|
if (i < 0) return;
|
|||
|
|
else list.splice(i, 1);
|
|||
|
|
}
|
|||
|
|
// #endregion
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped></style>
|