不带内置的进度条
1.定义两个变量用户文档列表的展示,以及上传
//文档列表
const docFileList = ref([]);
//上传文档列表
const uploadDocList = ref([]);
- 上传文档
//上传文档
const handleProgressDoc = async (uploadFile) => {
if (
[
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
'application/pdf',
].includes(uploadFile.raw.type)
) {
const [err, data] = await fireUpload({
files: [uploadFile.raw],
});
if (!err) {
uploadDocList.value.push({ uid: uploadFile.uid, ...data[0] });
} else {
ElMessage.error(err);
}
} else {
ElMessage({
message: `上传文件只能是 .doc, .docx,.pdf, 格式!`,
type: 'warning',
});
docFileList.value.pop();
return;
}
};
- 删除文档
//取消上传文档
const handleRemoveDoc = async (uploadFile) => {
const removeItem = uploadDocList.value.filter((i) => i.uid === uploadFile.uid)[0];
docFileList.value = docFileList.value.filter((i) => i.uid != uploadFile.uid);
uploadDocList.value = toRaw(uploadDocList.value).filter((i) => i.uid != uploadFile.uid);
const [err] = await fireDel({
object: removeItem.object,
});
if (err) {
ElMessage.error(err);
}
};
- 模板代码
<ElUpload
v-model:file-list="docFileList"
list-type="text"
:auto-upload="false"
:on-change="handleProgressDoc"
:on-exceed="handleExceedDoc"
limit="5"
accept=".docx,.pdf,.xlsx"
>
<div class="primary_btn">
<ElIcon><Upload /></ElIcon>
上传文件
</div>
<template #file="{ file }">
<div class="file_box">
<div class="file_title" :title="file.name">{{ file.name ?? file.filename }}</div>
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-delete" @click="handleRemoveDoc(file)">
<ElIcon><Delete /></ElIcon>
</span>
</span>
</div>
</template>
<template #tip>
<div class="el-upload__tip">支持docx.pdf.xlsx格式,最多上传5个附件</div>
</template>
</ElUpload>
- 完整代码
<script setup>
import { ElDialog, ElForm, ElFormItem, ElIcon, ElInput, ElMessage, ElUpload } from 'element-plus';
import { reactive, toRefs, ref, toRaw, onMounted } from 'vue';
import { Upload, Delete } from '@element-plus/icons-vue';
import { fireUpload, fireDel } from '@/apis/api-files';
const formRef = ref(null);
//文档列表
const docFileList = ref([]);
//上传文档列表
const uploadDocList = ref([]);
//上传文档
const handleProgressDoc = async (uploadFile) => {
if (
[
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
'application/pdf',
].includes(uploadFile.raw.type)
) {
const [err, data] = await fireUpload({
files: [uploadFile.raw],
});
if (!err) {
uploadDocList.value.push({ uid: uploadFile.uid, ...data[0] });
} else {
ElMessage.error(err);
}
} else {
ElMessage({
message: `上传文件只能是 .doc, .docx,.pdf, 格式!`,
type: 'warning',
});
docFileList.value.pop();
return;
}
};
//取消上传文档
const handleRemoveDoc = async (uploadFile) => {
const removeItem = uploadDocList.value.filter((i) => i.uid === uploadFile.uid)[0];
docFileList.value = docFileList.value.filter((i) => i.uid != uploadFile.uid);
uploadDocList.value = toRaw(uploadDocList.value).filter((i) => i.uid != uploadFile.uid);
const [err] = await fireDel({
object: removeItem.object,
});
if (err) {
ElMessage.error(err);
}
};
</script>
<template>
<div class="compiler-box-root">
<ElUpload
v-model:file-list="docFileList"
list-type="text"
:auto-upload="false"
:on-change="handleProgressDoc"
:on-exceed="handleExceedDoc"
limit="5"
accept=".docx,.pdf,.xlsx"
>
<div class="primary_btn">
<ElIcon><Upload /></ElIcon>
上传文件
</div>
<template #file="{ file }">
<div class="file_box">
<div class="file_title" :title="file.name">{{ file.name ?? file.filename }}</div>
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-delete" @click="handleRemoveDoc(file)">
<ElIcon><Delete /></ElIcon>
</span>
</span>
</div>
</template>
<template #tip>
<div class="el-upload__tip">支持docx.pdf.xlsx格式,最多上传5个附件</div>
</template>
</ElUpload>
</div>
</template>
带内置的进度条
- 模板
<ElUpload
v-model:file-list="uploadDocList"
:action="apiPath_fireUpload" //接口路径
name="files"
:headers="FileHeaders" //文件上传头
:show-file-list="true"
:auto-upload="true"
:before-upload="(file) => beforeAvatarUpload('fj', file)" //上传前验证
:on-success="success"
:on-error="error"
:on-exceed="() => exceed()"
:on-remove="handleRemoveFire"
accept=".docx,.pdf,.xlsx"
:limit="5"
>
<div class="file_box">
<div class="primary_btn">
<ElIcon><Upload /></ElIcon>
上传文件
</div>
<div class="fj-tip">支持docx.pdf.xlsx格式,最多上传5个附件</div>
</div>
</ElUpload>
- 方法
// 文件上传头
export const FileHeaders = {
Authorization: sessionStorage.getItem(KEY_TOKEN) ? `Bearer ${sessionStorage.getItem(KEY_TOKEN)}` : '',
'CUSTOMIZE-CLIENT-TYPE': 'web',
};
// 上传前验证
const beforeAvatarUpload = (key, rawFile) => {
switch (key) {
case 'fj':
if (
![
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
'application/pdf',
].includes(rawFile.type)
) {
ElMessage.error('仅支持PNG.JPG.JPEG.BPM格式!');
return false;
} else if (rawFile.size / 1024 / 1024 > 10) {
ElMessage.error('图片单张不超过10M!');
return false;
}
break;
default:
if (!UPLOAD_FILE_TYPE_PHOTO(rawFile)) {
ElMessage.error('仅支持PNG.JPG.JPEG.BPM格式!');
return false;
} else if (rawFile.size / 1024 / 1024 > 10) {
ElMessage.error('图片单张不超过10M!');
return false;
}
break;
}
return true;
};
// 成功回调
const success = () => {
ElMessage.success('成功');
};
// 失败回调
const error = () => {
ElMessage.error('上传失败');
};
// 超出限制
const exceed = () => {
ElMessage.warning('支持docx.pdf.xlsx格式,最多上传5个附件');
};
// 删除文档
const handleRemoveFire = async (uploadFile) => {
if ('response' in uploadFile) {
removeDocList.value.push(uploadFile?.response?.[0]);
} else {
removeDocList.value.push(uploadFile);
}
};