105 lines
2.4 KiB
Vue
105 lines
2.4 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';
|
||
import { CommonUpload } from '@/apis';
|
||
|
||
const emit = defineEmits(['update:attrs']);
|
||
const props = defineProps({
|
||
attrs: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
limit: {
|
||
type: Number,
|
||
default: 5,
|
||
},
|
||
format: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
size: {
|
||
type: Number,
|
||
default: 20,
|
||
},
|
||
});
|
||
|
||
/* --------------- data --------------- */
|
||
// #region
|
||
|
||
const fileList = ref([]);
|
||
watch(
|
||
() => props.attrs,
|
||
(val) => {
|
||
fileList.value = val;
|
||
},
|
||
{ deep: true, immediate: true }
|
||
);
|
||
// #endregion
|
||
|
||
/* --------------- methods --------------- */
|
||
// #region
|
||
|
||
async 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);
|
||
}
|
||
await rowUploadPicture(file);
|
||
}
|
||
function handleDelFile(file) {
|
||
delAttr(file.uid, fileList.value);
|
||
}
|
||
function delAttr(uid, list = []) {
|
||
if (!uid || !list) return false;
|
||
let i = list.findIndex((v) => v.uid == uid);
|
||
if (i < 0) return;
|
||
else list.splice(i, 1);
|
||
emit('update:attrs', fileList.value);
|
||
}
|
||
|
||
async function rowUploadPicture({ raw, name, uid }) {
|
||
const formData = new FormData();
|
||
formData.append('file', raw);
|
||
const res = await CommonUpload(formData);
|
||
if (res.code === 200) {
|
||
fileList.value.push({
|
||
name,
|
||
url: res.data.url,
|
||
status: 'success',
|
||
uid,
|
||
});
|
||
emit('update:attrs', fileList.value);
|
||
}
|
||
}
|
||
|
||
// #endregion
|
||
</script>
|
||
|
||
<style lang="scss" scoped></style>
|