Skip to content

feat: 🚀 新增文件上传-视频类型 #137

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

feat: 🚀 新增文件上传-视频类型 #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e69f71b
feat: 🚀 新增文件上传-视频类型
gamefake588 Feb 28, 2023
0676abf
feat: 🚀 新增文件上传-视频类型
gamefake588 Feb 28, 2023
a5d13d0
fix: 🧩 验证fileType传入参数格式异常
gamefake588 Mar 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions src/components/Upload/Img.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,15 +64,19 @@ type FileTypes =
| "image/svg+xml"
| "image/tiff"
| "image/webp"
| "image/x-icon";
| "image/x-icon"
| "video/mp4"
| "video/avi"
| "video/wmv"
| "video/rm";

interface UploadFileProps {
imageUrl: string; // 图片地址 ==> 必传
api?: (params: any) => Promise<any>; // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传
drag?: boolean; // 是否支持拖拽上传 ==> 非必传（默认为 true）
disabled?: boolean; // 是否禁用上传组件 ==> 非必传（默认为 false）
fileSize?: number; // 图片大小限制 ==> 非必传（默认为 5M）
fileType?: FileTypes[]; // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
fileType?: Array<FileTypes | string>; // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
height?: string; // 组件高度 ==> 非必传（默认为 150px）
width?: string; // 组件宽度 ==> 非必传（默认为 150px）
borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px）
Expand Down Expand Up @@ -150,7 +154,13 @@ const editImg = () => {
const beforeUpload: UploadProps["beforeUpload"] = rawFile => {
const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
const imgType = props.fileType;
if (!imgType.includes(rawFile.type as FileTypes))
// 验证fileType传入'image/*','video/*'等参数格式
if (
!imgType.some(
_ =>
imgType.includes(rawFile.type as FileTypes) || (_.indexOf("/*") > -1 && _.split("/*")[0] === rawFile.type.split("/")[0])
)
)
ElNotification({
title: "温馨提示",
message: "上传图片不符合所需的格式！",
Expand Down
16 changes: 13 additions & 3 deletions src/components/Upload/Imgs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,11 @@ type FileTypes =
| "image/svg+xml"
| "image/tiff"
| "image/webp"
| "image/x-icon";
| "image/x-icon"
| "video/mp4"
| "video/avi"
| "video/wmv"
| "video/rm";

interface UploadFileProps {
fileList: UploadUserFile[];
Expand All @@ -69,7 +73,7 @@ interface UploadFileProps {
disabled?: boolean; // 是否禁用上传组件 ==> 非必传（默认为 false）
limit?: number; // 最大图片上传数 ==> 非必传（默认为 5张）
fileSize?: number; // 图片大小限制 ==> 非必传（默认为 5M）
fileType?: FileTypes[]; // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
fileType?: Array<FileTypes | string>; // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
height?: string; // 组件高度 ==> 非必传（默认为 150px）
width?: string; // 组件宽度 ==> 非必传（默认为 150px）
borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px）
Expand Down Expand Up @@ -105,7 +109,13 @@ const fileList = ref<UploadUserFile[]>(props.fileList);
const beforeUpload: UploadProps["beforeUpload"] = rawFile => {
const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
const imgType = props.fileType;
if (!imgType.includes(rawFile.type as FileTypes))
// 验证fileType传入'image/*','video/*'等参数格式
if (
!imgType.some(
_ =>
imgType.includes(rawFile.type as FileTypes) || (_.indexOf("/*") > -1 && _.split("/*")[0] === rawFile.type.split("/")[0])
)
)
ElNotification({
title: "温馨提示",
message: "上传图片不符合所需的格式！",
Expand Down