refactor: ♻️ 文件和图片上传组件重构，精简参数和降低代码复杂度
This commit is contained in:
Ray.Hao
@@ -3,53 +3,41 @@
|
||||
<div>
|
||||
<el-upload
|
||||
v-model:file-list="fileList"
|
||||
:class="props.showUploadBtn ? 'show-upload-btn' : 'hide-upload-btn'"
|
||||
:style="props.style"
|
||||
multiple
|
||||
:headers="props.headers"
|
||||
:data="props.data"
|
||||
:name="props.name"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:on-remove="handleRemove"
|
||||
:http-request="handleUpload"
|
||||
:on-progress="handleProgress"
|
||||
:on-success="handleSuccessFile"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:action="props.action"
|
||||
:accept="props.accept"
|
||||
:limit="props.limit"
|
||||
multiple
|
||||
>
|
||||
<el-button
|
||||
v-if="props.showUploadBtn"
|
||||
type="primary"
|
||||
:disabled="fileList.length >= props.limit"
|
||||
>
|
||||
<!-- 上传文件按钮 -->
|
||||
<el-button type="primary" :disabled="fileList.length >= props.limit">
|
||||
{{ props.uploadBtnText }}
|
||||
</el-button>
|
||||
<template v-if="props.showTip" #tip>
|
||||
<div class="el-upload__tip">
|
||||
{{ props.tip }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 文件列表 -->
|
||||
<template #file="{ file }">
|
||||
<div class="el-upload-list__item-info">
|
||||
<a class="el-upload-list__item-name" @click="downloadFile(file)">
|
||||
<a class="el-upload-list__item-name" @click="handleDownload(file)">
|
||||
<el-icon><Document /></el-icon>
|
||||
<span class="el-upload-list__item-file-name">{{ file.name }}</span>
|
||||
<span v-if="props.showDelBtn" class="el-icon--close" @click.stop="handleRemove(file)">
|
||||
<span class="el-icon--close" @click="handleRemove(file.url!)">
|
||||
<el-icon><Close /></el-icon>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
|
||||
<el-progress
|
||||
v-if="showUploadPercent"
|
||||
:style="{
|
||||
display: showUploadPercent ? 'inline-flex' : 'none',
|
||||
display: showProgress ? 'inline-flex' : 'none',
|
||||
width: '100%',
|
||||
}"
|
||||
:percentage="uploadPercent"
|
||||
:color="customColorMethod"
|
||||
:percentage="progressPercent"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -57,98 +45,13 @@
|
||||
import {
|
||||
UploadRawFile,
|
||||
UploadUserFile,
|
||||
UploadFile,
|
||||
UploadProgressEvent,
|
||||
UploadFiles,
|
||||
UploadRequestOptions,
|
||||
} from "element-plus";
|
||||
|
||||
import FileAPI from "@/api/file";
|
||||
import { getToken } from "@/utils/auth";
|
||||
import { ResultEnum } from "@/enums/ResultEnum";
|
||||
import FileAPI, { FileInfo } from "@/api/file";
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
const props = defineProps({
|
||||
/**
|
||||
* 文件集合
|
||||
*/
|
||||
modelValue: {
|
||||
type: Array<UploadUserFile>,
|
||||
default: () => [],
|
||||
},
|
||||
/**
|
||||
* 上传地址
|
||||
*/
|
||||
action: {
|
||||
type: String,
|
||||
default: FileAPI.uploadUrl,
|
||||
},
|
||||
/**
|
||||
* 文件上传数量限制
|
||||
*/
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
/**
|
||||
* 是否显示删除按钮
|
||||
*/
|
||||
showDelBtn: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/**
|
||||
* 是否显示上传按钮
|
||||
*/
|
||||
showUploadBtn: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/**
|
||||
* 单个文件上传大小限制(单位MB)
|
||||
*/
|
||||
maxSize: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
/**
|
||||
* 上传文件类型
|
||||
*/
|
||||
accept: {
|
||||
type: String,
|
||||
default: "*",
|
||||
},
|
||||
/**
|
||||
* 上传按钮文本
|
||||
*/
|
||||
uploadBtnText: {
|
||||
type: String,
|
||||
default: "上传文件",
|
||||
},
|
||||
/**
|
||||
* 是否展示提示信息
|
||||
*/
|
||||
showTip: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* 提示信息内容
|
||||
*/
|
||||
tip: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
/**
|
||||
* 请求头
|
||||
*/
|
||||
headers: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
Authorization: getToken(),
|
||||
};
|
||||
},
|
||||
},
|
||||
/**
|
||||
* 请求携带的额外参数
|
||||
*/
|
||||
@@ -165,6 +68,35 @@ const props = defineProps({
|
||||
type: String,
|
||||
default: "file",
|
||||
},
|
||||
/**
|
||||
* 文件上传数量限制
|
||||
*/
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
/**
|
||||
* 单个文件上传大小限制(单位MB)
|
||||
*/
|
||||
maxFileSize: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
/**
|
||||
* 上传文件类型
|
||||
*/
|
||||
accept: {
|
||||
type: String,
|
||||
default: "*",
|
||||
},
|
||||
/**
|
||||
* 上传按钮文本
|
||||
*/
|
||||
uploadBtnText: {
|
||||
type: String,
|
||||
default: "上传文件",
|
||||
},
|
||||
|
||||
/**
|
||||
* 样式
|
||||
*/
|
||||
@@ -178,119 +110,108 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const modelValue = defineModel("modelValue", {
|
||||
type: [Array] as PropType<string[]>,
|
||||
required: true,
|
||||
default: () => [],
|
||||
});
|
||||
|
||||
const fileList = ref([] as UploadUserFile[]);
|
||||
const valFileList = ref([] as UploadUserFile[]);
|
||||
const showUploadPercent = ref(false);
|
||||
const uploadPercent = ref(0);
|
||||
|
||||
const showProgress = ref(false);
|
||||
const progressPercent = ref(0);
|
||||
|
||||
// 监听 modelValue 转换用于显示的 fileList
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newVal: UploadUserFile[]) => {
|
||||
const filePaths = fileList.value.map((file) => file.url);
|
||||
const fileNames = fileList.value.map((file) => file.name);
|
||||
// 监听modelValue文件集合值未变化时，跳过赋值
|
||||
if (
|
||||
filePaths.length > 0 &&
|
||||
filePaths.length === newVal.length &&
|
||||
filePaths.every((x) => newVal.some((y) => y.url === x)) &&
|
||||
newVal.every((y) => filePaths.some((x) => x === y.url)) &&
|
||||
fileNames.every((x) => newVal.some((y) => y.name === x)) &&
|
||||
newVal.every((y) => fileNames.some((x) => x === y.name))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (newVal.length <= 0) {
|
||||
fileList.value = [];
|
||||
valFileList.value = [];
|
||||
return;
|
||||
}
|
||||
|
||||
fileList.value = newVal.map((file) => {
|
||||
return { name: file.name, url: file.url } as UploadFile;
|
||||
});
|
||||
|
||||
valFileList.value = newVal.map((file) => {
|
||||
return { name: file.name, url: file.url } as UploadFile;
|
||||
modelValue,
|
||||
(value) => {
|
||||
fileList.value = value.map((url) => {
|
||||
const name = url.substring(url.lastIndexOf("/") + 1);
|
||||
return {
|
||||
name: name,
|
||||
url: url,
|
||||
} as UploadUserFile;
|
||||
});
|
||||
},
|
||||
{ immediate: true }
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* 限制用户上传文件的大小
|
||||
* 上传前校验
|
||||
*/
|
||||
function handleBeforeUpload(file: UploadRawFile) {
|
||||
if (file.size > props.maxSize * 1024 * 1024) {
|
||||
ElMessage.warning("上传文件不能大于" + props.maxSize + "Mb");
|
||||
// 限制文件大小
|
||||
if (file.size > props.maxFileSize * 1024 * 1024) {
|
||||
ElMessage.warning("上传图片不能大于" + props.maxFileSize + "M");
|
||||
return false;
|
||||
}
|
||||
uploadPercent.value = 0;
|
||||
showUploadPercent.value = true;
|
||||
return true;
|
||||
}
|
||||
/**
|
||||
* 上传成功回调方法
|
||||
* @param response 响应题
|
||||
* @param file 上传文件
|
||||
|
||||
/*
|
||||
* 上传文件
|
||||
*/
|
||||
const handleSuccessFile = (response: any, file: UploadFile) => {
|
||||
showUploadPercent.value = false;
|
||||
uploadPercent.value = 0;
|
||||
if (response.code === ResultEnum.SUCCESS) {
|
||||
ElMessage.success("上传成功");
|
||||
valFileList.value.push({
|
||||
name: file.name,
|
||||
url: response.data.url,
|
||||
function handleUpload(options: UploadRequestOptions) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const file = options.file;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append(props.name, file);
|
||||
|
||||
// 处理附加参数
|
||||
Object.keys(props.data).forEach((key) => {
|
||||
formData.append(key, props.data[key]);
|
||||
});
|
||||
emit("update:modelValue", valFileList.value);
|
||||
return;
|
||||
} else {
|
||||
ElMessage.error(response.msg || "上传失败");
|
||||
}
|
||||
|
||||
FileAPI.upload(formData)
|
||||
.then((data) => {
|
||||
resolve(data);
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传进度
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
const handleProgress = (event: UploadProgressEvent) => {
|
||||
progressPercent.value = event.percent;
|
||||
};
|
||||
|
||||
/**
|
||||
* 上传成功
|
||||
*/
|
||||
const handleSuccess = (fileInfo: FileInfo) => {
|
||||
ElMessage.success("上传成功");
|
||||
modelValue.value = [...modelValue.value, fileInfo.url];
|
||||
};
|
||||
|
||||
const handleError = (error: any) => {
|
||||
showUploadPercent.value = false;
|
||||
uploadPercent.value = 0;
|
||||
ElMessage.error("上传失败");
|
||||
};
|
||||
|
||||
const customColorMethod = (percentage: number) => {
|
||||
if (percentage < 30) {
|
||||
return "#909399";
|
||||
}
|
||||
if (percentage < 70) {
|
||||
return "#375ee8";
|
||||
}
|
||||
return "#67c23a";
|
||||
};
|
||||
|
||||
const handleProgress = (event: UploadProgressEvent) => {
|
||||
uploadPercent.value = event.percent;
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除文件
|
||||
*/
|
||||
function handleRemove(removeFile: UploadUserFile) {
|
||||
const filePath = removeFile.url;
|
||||
if (filePath) {
|
||||
FileAPI.deleteByPath(filePath).then(() => {
|
||||
// 删除成功回调
|
||||
valFileList.value = valFileList.value.filter((file) => file.url !== filePath);
|
||||
emit("update:modelValue", valFileList.value);
|
||||
});
|
||||
}
|
||||
function handleRemove(fileUrl: string) {
|
||||
FileAPI.delete(fileUrl).then(() => {
|
||||
modelValue.value = modelValue.value.filter((url) => url !== fileUrl);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载文件
|
||||
*/
|
||||
function downloadFile(file: UploadUserFile) {
|
||||
const filePath = file.url;
|
||||
if (filePath) {
|
||||
FileAPI.downloadFile(filePath, file.name);
|
||||
function handleDownload(file: UploadUserFile) {
|
||||
const { url, name } = file;
|
||||
if (url) {
|
||||
FileAPI.download(url, name);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -313,16 +234,4 @@ function downloadFile(file: UploadUserFile) {
|
||||
:deep(.el-upload-list__item) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.show-upload-btn {
|
||||
:deep(.el-upload) {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
.hide-upload-btn {
|
||||
:deep(.el-upload) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,344 +0,0 @@
|
||||
<!-- 图片上传组件 -->
|
||||
<template>
|
||||
<!-- 实际的上传组件（隐藏） -->
|
||||
<div style="display: none">
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
:file-list="fileList"
|
||||
:http-request="handleUpload"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:data="props.additionalParams"
|
||||
:name="props.fileParamName"
|
||||
:accept="props.accept"
|
||||
:limit="props.limit"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 自定义的显示区域 -->
|
||||
<div class="custom-upload-list">
|
||||
<!-- 已上传的图片列表 -->
|
||||
<div v-for="(path, index) in uploadedImageUrls" :key="index" class="custom-upload-item">
|
||||
<img class="upload-thumbnail" :src="path" alt="" />
|
||||
<div class="upload-actions">
|
||||
<span class="action-item preview" @click="previewImg(path)">
|
||||
<el-icon><zoom-in /></el-icon>
|
||||
</span>
|
||||
<span v-if="props.showDelBtn" class="action-item delete" @click="handleRemove(path)">
|
||||
<el-icon><Delete /></el-icon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 上传按钮 -->
|
||||
<div
|
||||
v-if="uploadedImageUrls.length < props.limit && props.showUploadBtn"
|
||||
class="custom-upload-trigger"
|
||||
@click="triggerUpload"
|
||||
>
|
||||
<el-icon><Plus /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片预览组件 -->
|
||||
<el-image-viewer
|
||||
v-if="previewVisible"
|
||||
:zoom-rate="1.2"
|
||||
:initialIndex="previewImageIndex"
|
||||
:url-list="uploadedImageUrls"
|
||||
@close="closePreview"
|
||||
/>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { UploadRawFile, UploadUserFile, UploadRequestOptions } from "element-plus";
|
||||
import FileAPI, { FileInfo } from "@/api/file";
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
|
||||
const props = defineProps({
|
||||
/**
|
||||
* 附加的参数
|
||||
*/
|
||||
additionalParams: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
/**
|
||||
* 上传文件的参数名
|
||||
*/
|
||||
fileParamName: {
|
||||
type: String,
|
||||
default: "file",
|
||||
},
|
||||
/**
|
||||
* 文件上传数量限制
|
||||
*/
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
/**
|
||||
* 是否显示删除按钮
|
||||
*/
|
||||
showDelBtn: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/**
|
||||
* 是否显示上传按钮
|
||||
*/
|
||||
showUploadBtn: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/**
|
||||
* 单张图片最大大小,单位MB
|
||||
*/
|
||||
maxSize: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
/**
|
||||
* 上传文件类型
|
||||
*/
|
||||
accept: {
|
||||
type: String,
|
||||
default: "image/*",
|
||||
},
|
||||
|
||||
/**
|
||||
* 自定义样式
|
||||
*/
|
||||
style: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
width: "130px",
|
||||
height: "130px",
|
||||
};
|
||||
},
|
||||
},
|
||||
/**
|
||||
* 是否多图上传
|
||||
*/
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
// 定义v-model
|
||||
const modelValue = defineModel("modelValue", {
|
||||
type: [String, Array] as PropType<string | string[]>,
|
||||
required: true,
|
||||
default: () => "",
|
||||
});
|
||||
|
||||
const previewVisible = ref(false); // 是否显示预览
|
||||
const previewImageIndex = ref(0); // 预览的图片索引
|
||||
|
||||
const fileList = ref<UploadUserFile[]>([]); // 默认上传文件
|
||||
const uploadedImageUrls = ref<string[]>([]); // 已上传的图片
|
||||
|
||||
// 添加一个ref来引用el-upload组件
|
||||
const uploadRef = ref();
|
||||
|
||||
watch(
|
||||
() => modelValue.value,
|
||||
(newValue) => {
|
||||
if (Array.isArray(newValue)) {
|
||||
fileList.value = newValue.map((filePath) => {
|
||||
return { url: filePath } as UploadUserFile;
|
||||
});
|
||||
} else {
|
||||
fileList.value = [];
|
||||
uploadedImageUrls.value = [];
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
/**
|
||||
* 删除图片
|
||||
*/
|
||||
function handleRemove(path: string) {
|
||||
if (path) {
|
||||
FileAPI.deleteByPath(path).then(() => {
|
||||
if (Array.isArray(modelValue.value)) {
|
||||
modelValue.value = modelValue.value.filter((x) => x !== path);
|
||||
} else {
|
||||
modelValue.value = "";
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 限制用户上传文件的格式和大小
|
||||
*/
|
||||
function handleBeforeUpload(file: UploadRawFile) {
|
||||
// 限制文件大小
|
||||
if (file.size > props.maxSize * 1024 * 1024) {
|
||||
ElMessage.warning("上传图片不能大于" + props.maxSize + "M");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
/*
|
||||
* 上传文件
|
||||
*/
|
||||
function handleUpload(options: UploadRequestOptions) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const { file, onSuccess, onError } = options;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append(props.fileParamName, file);
|
||||
|
||||
// 处理附加参数
|
||||
Object.keys(props.additionalParams).forEach((key) => {
|
||||
formData.append(key, props.additionalParams[key]);
|
||||
});
|
||||
|
||||
FileAPI.upload(formData)
|
||||
.then((data) => {
|
||||
onSuccess(data);
|
||||
resolve(data);
|
||||
})
|
||||
.catch((error) => {
|
||||
onError(error);
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传成功回调
|
||||
*
|
||||
* @param fileInfo 上传成功后的文件信息
|
||||
*/
|
||||
const handleSuccess = (fileInfo: FileInfo) => {
|
||||
ElMessage.success("上传成功");
|
||||
const { url } = fileInfo;
|
||||
uploadedImageUrls.value.push(url);
|
||||
if (props.multiple && Array.isArray(modelValue.value)) {
|
||||
modelValue.value.push(url);
|
||||
} else {
|
||||
modelValue.value = url;
|
||||
}
|
||||
return;
|
||||
};
|
||||
|
||||
/**
|
||||
* 上传失败回调
|
||||
*
|
||||
* @param error 上传失败的错误信息
|
||||
*/
|
||||
const handleError = (error: any) => {
|
||||
ElMessage.error("上传失败");
|
||||
};
|
||||
|
||||
/**
|
||||
* 预览图片
|
||||
*/
|
||||
const previewImg = (path: string) => {
|
||||
previewImageUrls.value = fileList.value.map((file) => file.url!);
|
||||
initialIndex.value = fileList.value.findIndex((file) => file.url === path);
|
||||
previewVisible.value = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* 关闭预览
|
||||
*/
|
||||
const closePreview = () => {
|
||||
previewVisible.value = false;
|
||||
};
|
||||
|
||||
// 修改triggerUpload方法
|
||||
const triggerUpload = () => {
|
||||
// 通过ref直接访问el-upload组件内的input元素
|
||||
const uploadEl = uploadRef.value.$el.querySelector(".el-upload__input");
|
||||
if (uploadEl) {
|
||||
uploadEl.click();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.custom-upload-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.custom-upload-item {
|
||||
position: relative;
|
||||
width: v-bind("props.style.width");
|
||||
height: v-bind("props.style.height");
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
|
||||
.upload-thumbnail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.upload-actions {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.action-item {
|
||||
padding: 8px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-upload-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: v-bind("props.style.width");
|
||||
height: v-bind("props.style.height");
|
||||
cursor: pointer;
|
||||
background-color: rgb(255 254 254 / 50%);
|
||||
border: 1px dashed var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
transition: var(--el-transition-duration);
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
&:hover .el-icon {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,57 +1,52 @@
|
||||
<!-- 图片上传组件 -->
|
||||
<template>
|
||||
<div>
|
||||
<el-upload
|
||||
v-model:file-list="fileList"
|
||||
list-type="picture-card"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:http-request="handleUpload"
|
||||
:data="props.additionalParams"
|
||||
:name="props.fileParamName"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:on-exceed="handleExceed"
|
||||
:accept="props.accept"
|
||||
:limit="props.limit"
|
||||
>
|
||||
<el-icon><Plus /></el-icon>
|
||||
<template #file="{ file }">
|
||||
<div style="width: 100%">
|
||||
<image class="el-upload-list__item-thumbnail" :src="file.url" />
|
||||
<span class="el-upload-list__item-actions">
|
||||
<!-- 预览 -->
|
||||
<span class="el-upload-list__item-preview" @click="handlePreviewImage(file.url!)">
|
||||
<el-icon><zoom-in /></el-icon>
|
||||
</span>
|
||||
<!-- 删除 -->
|
||||
<span class="el-upload-list__item-delete" @click="handleRemove(file.url!)">
|
||||
<el-icon><Delete /></el-icon>
|
||||
</span>
|
||||
<el-upload
|
||||
v-model:file-list="fileList"
|
||||
list-type="picture-card"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:http-request="handleUpload"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:on-exceed="handleExceed"
|
||||
:accept="props.accept"
|
||||
:limit="props.limit"
|
||||
multiple
|
||||
>
|
||||
<el-icon><Plus /></el-icon>
|
||||
<template #file="{ file }">
|
||||
<div style="width: 100%">
|
||||
<img class="el-upload-list__item-thumbnail" :src="file.url" />
|
||||
<span class="el-upload-list__item-actions">
|
||||
<!-- 预览 -->
|
||||
<span @click="handlePreviewImage(file.url!)">
|
||||
<el-icon><zoom-in /></el-icon>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
<!-- 删除 -->
|
||||
<span @click="handleRemove(file.url!)">
|
||||
<el-icon><Delete /></el-icon>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
|
||||
<el-image-viewer
|
||||
v-if="previewVisible"
|
||||
:zoom-rate="1.2"
|
||||
:previewImageIndex="previewImageIndex"
|
||||
:url-list="modelValue"
|
||||
@close="handlePreviewClose"
|
||||
/>
|
||||
</div>
|
||||
<el-image-viewer
|
||||
v-if="previewVisible"
|
||||
:zoom-rate="1.2"
|
||||
:initial-index="previewImageIndex"
|
||||
:url-list="modelValue"
|
||||
@close="handlePreviewClose"
|
||||
/>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { UploadRawFile, UploadRequestOptions, UploadUserFile } from "element-plus";
|
||||
import FileAPI, { FileInfo } from "@/api/file";
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
|
||||
const props = defineProps({
|
||||
/**
|
||||
* 请求携带的额外参数
|
||||
*/
|
||||
additionalParams: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
@@ -60,7 +55,7 @@ const props = defineProps({
|
||||
/**
|
||||
* 上传文件的参数名
|
||||
*/
|
||||
fileParamName: {
|
||||
name: {
|
||||
type: String,
|
||||
default: "file",
|
||||
},
|
||||
@@ -72,7 +67,7 @@ const props = defineProps({
|
||||
default: 10,
|
||||
},
|
||||
/**
|
||||
*
|
||||
* 单个文件的最大允许大小
|
||||
*/
|
||||
maxFileSize: {
|
||||
type: Number,
|
||||
@@ -98,7 +93,7 @@ const modelValue = defineModel("modelValue", {
|
||||
|
||||
const fileList = ref<UploadUserFile[]>([]);
|
||||
|
||||
// modelValue 监听转换所需的 fileList
|
||||
// 监听 modelValue 转换用于显示的 fileList
|
||||
watch(
|
||||
modelValue,
|
||||
(value) => {
|
||||
@@ -124,14 +119,7 @@ function handleRemove(imageUrl: string) {
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传文件超出限制
|
||||
*/
|
||||
function handleExceed(files: File[], uploadFiles: UploadUserFile[]) {
|
||||
ElMessage.warning("最多只能上传" + props.limit + "张图片");
|
||||
}
|
||||
|
||||
/**
|
||||
* 限制用户上传文件的格式和大小
|
||||
* 上传前校验
|
||||
*/
|
||||
function handleBeforeUpload(file: UploadRawFile) {
|
||||
// 校验文件类型：虽然 accept 属性限制了用户在文件选择器中可选的文件类型，但仍需在上传时再次校验文件实际类型，确保符合 accept 的规则
|
||||
@@ -157,8 +145,8 @@ function handleBeforeUpload(file: UploadRawFile) {
|
||||
}
|
||||
|
||||
// 限制文件大小
|
||||
if (file.size > props.maxSize * 1024 * 1024) {
|
||||
ElMessage.warning("上传图片不能大于" + props.maxSize + "M");
|
||||
if (file.size > props.maxFileSize * 1024 * 1024) {
|
||||
ElMessage.warning("上传图片不能大于" + props.maxFileSize + "M");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
@@ -172,11 +160,11 @@ function handleUpload(options: UploadRequestOptions) {
|
||||
const file = options.file;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append(props.fileParamName, file);
|
||||
formData.append(props.name, file);
|
||||
|
||||
// 处理附加参数
|
||||
Object.keys(props.additionalParams).forEach((key) => {
|
||||
formData.append(key, props.additionalParams[key]);
|
||||
Object.keys(props.data).forEach((key) => {
|
||||
formData.append(key, props.data[key]);
|
||||
});
|
||||
|
||||
FileAPI.upload(formData)
|
||||
@@ -189,10 +177,15 @@ function handleUpload(options: UploadRequestOptions) {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传文件超出限制
|
||||
*/
|
||||
function handleExceed(files: File[], uploadFiles: UploadUserFile[]) {
|
||||
ElMessage.warning("最多只能上传" + props.limit + "张图片");
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传成功回调
|
||||
*
|
||||
* @param fileInfo 上传成功后的文件信息
|
||||
*/
|
||||
const handleSuccess = (fileInfo: FileInfo) => {
|
||||
ElMessage.success("上传成功");
|
||||
@@ -222,16 +215,4 @@ const handlePreviewClose = () => {
|
||||
previewVisible.value = false;
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.hide {
|
||||
:deep(.el-upload--picture-card) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.show {
|
||||
:deep(.el-upload--picture-card) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
202
src/components/Upload/SingleImageUpload.vue
Normal file
202
src/components/Upload/SingleImageUpload.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<!-- 单图上传组件 -->
|
||||
<template>
|
||||
<el-upload
|
||||
v-model="modelValue"
|
||||
class="single-upload"
|
||||
list-type="picture-card"
|
||||
:accept="props.accept"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:http-request="handleUpload"
|
||||
:on-success="onSuccess"
|
||||
:on-error="onError"
|
||||
multiple
|
||||
>
|
||||
<template #default>
|
||||
<el-image v-if="modelValue" :src="modelValue" />
|
||||
<el-icon v-if="modelValue" class="single-upload__delete-btn" @click.stop="handleDelete">
|
||||
<CircleCloseFilled />
|
||||
</el-icon>
|
||||
<el-icon v-else class="single-upload__add-btn">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-upload>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElImageViewer, UploadRawFile, UploadRequestOptions } from "element-plus";
|
||||
import FileAPI, { FileInfo } from "@/api/file";
|
||||
|
||||
const props = defineProps({
|
||||
/**
|
||||
* 请求携带的额外参数
|
||||
*/
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
/**
|
||||
* 上传文件的参数名
|
||||
*/
|
||||
name: {
|
||||
type: String,
|
||||
default: "file",
|
||||
},
|
||||
/**
|
||||
* 文件大小允许最大（单位：MB）
|
||||
*/
|
||||
maxFileSize: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
|
||||
/**
|
||||
* 接收文件类型
|
||||
*/
|
||||
accept: {
|
||||
type: String,
|
||||
default: "image/*", // 默认支持所有图片格式 ，如果需要指定格式，格式如下：'.png,.jpg,.jpeg,.gif,.bmp'
|
||||
},
|
||||
|
||||
/**
|
||||
* 自定义样式
|
||||
*/
|
||||
style: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
width: "130px",
|
||||
height: "130px",
|
||||
};
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const modelValue = defineModel("modelValue", {
|
||||
type: String,
|
||||
required: true,
|
||||
default: () => "",
|
||||
});
|
||||
|
||||
/**
|
||||
* 限制用户上传文件的格式和大小
|
||||
*/
|
||||
function handleBeforeUpload(file: UploadRawFile) {
|
||||
// 校验文件类型：虽然 accept 属性限制了用户在文件选择器中可选的文件类型，但仍需在上传时再次校验文件实际类型，确保符合 accept 的规则
|
||||
const acceptTypes = props.accept.split(",").map((type) => type.trim());
|
||||
|
||||
// 检查文件格式是否符合 accept
|
||||
const isValidType = acceptTypes.some((type) => {
|
||||
if (type === "image/*") {
|
||||
// 如果是 image/*，检查 MIME 类型是否以 "image/" 开头
|
||||
return file.type.startsWith("image/");
|
||||
} else if (type.startsWith(".")) {
|
||||
// 如果是扩展名 (.png, .jpg)，检查文件名是否以指定扩展名结尾
|
||||
return file.name.toLowerCase().endsWith(type);
|
||||
} else {
|
||||
// 如果是具体的 MIME 类型 (image/png, image/jpeg)，检查是否完全匹配
|
||||
return file.type === type;
|
||||
}
|
||||
});
|
||||
|
||||
if (!isValidType) {
|
||||
ElMessage.warning(`上传文件的格式不正确，仅支持：${props.accept}`);
|
||||
return false;
|
||||
}
|
||||
|
||||
// 限制文件大小
|
||||
if (file.size > props.maxFileSize * 1024 * 1024) {
|
||||
ElMessage.warning("上传图片不能大于" + props.maxFileSize + "M");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
/*
|
||||
* 上传图片
|
||||
*/
|
||||
function handleUpload(options: UploadRequestOptions) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const file = options.file;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append(props.name, file);
|
||||
|
||||
// 处理附加参数
|
||||
Object.keys(props.data).forEach((key) => {
|
||||
formData.append(key, props.data[key]);
|
||||
});
|
||||
|
||||
FileAPI.upload(formData)
|
||||
.then((data) => {
|
||||
resolve(data);
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除图片
|
||||
*/
|
||||
function handleDelete() {
|
||||
modelValue.value = "";
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传成功回调
|
||||
*
|
||||
* @param fileInfo 上传成功后的文件信息
|
||||
*/
|
||||
const onSuccess = (fileInfo: FileInfo) => {
|
||||
ElMessage.success("上传成功");
|
||||
modelValue.value = fileInfo.url;
|
||||
};
|
||||
|
||||
/**
|
||||
* 上传失败回调
|
||||
*/
|
||||
const onError = (error: any) => {
|
||||
console.log("onError");
|
||||
ElMessage.error("上传失败: " + error.message);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-upload--picture-card) {
|
||||
/* width: var(--el-upload-picture-card-size);
|
||||
height: var(--el-upload-picture-card-size); */
|
||||
width: v-bind("props.style.width");
|
||||
height: v-bind("props.style.height");
|
||||
}
|
||||
|
||||
.single-upload {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border: 1px var(--el-border-color) solid;
|
||||
border-radius: 5px;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
&__delete-btn {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
font-size: 16px;
|
||||
color: #ff7901;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
border-radius: 100%;
|
||||
|
||||
:hover {
|
||||
color: #ff4500;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user