二次封裝element-plus上傳組件
- 0 相關介紹
- 1 效果展示
- 2 組件主體
- 3 視頻組件
- 4 Demo
0 相關介紹
基于element-plus框架，視頻播放器使用西瓜視頻播放器組件
相關能力
- 提供圖片、音頻、視頻的預覽功能
- 提供是否為空、文件類型、文件大小、文件數量、圖片寬高校驗
- 提供圖片回顯功能，并保證回顯的文件不會重新上傳
- 提供達到數量限制不顯示element自帶的加號
相關文檔
- 西瓜播放器
- element-plus
1 效果展示
2 組件主體
<template><el-uploadlist-type="picture-card":auto-upload="false":on-change="onChange":on-remove="onChange":multiple="props.multiple":limit="props.limit":accept="accept"ref="elUploadElement":file-list="fileList":id="fileUploadId"><el-icon><Plus /></el-icon><template #file="{ file }"><div><imgclass="el-upload-list__item-thumbnail":src="file.viewUrl"alt=""v-if="isShow"/><span class="el-upload-list__item-actions"><spanclass="el-upload-list__item-preview"@click="handlePictureCardPreview(file)"><el-icon><zoom-in /></el-icon></span><span class="el-upload-list__item-delete" @click="handleRemove(file)"><el-icon><Delete /></el-icon></span></span></div></template><template #tip><div class="el-upload__tip">{{ tip }}</div></template></el-upload><!-- 文件預覽彈窗 --><el-dialogv-model="dialogVisible"style="width: 800px"@close="close"@open="open"><el-imagev-if="previewFile.type === 'image'"style="width: 100%; height: 400px":src="previewFile.url"fit="contain"alt="Preview Image"/><videoComponentref="videoRef"v-if="previewFile.type === 'video'"style="width: 100%; height: 400px":url="previewFile.url":poster="previewFile.viewUrl"/><audioref="audioRef"v-if="previewFile.type === 'audio'":src="previewFile.url"controlsstyle="width: 100%; height: 400px"/></el-dialog>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { Delete, Plus, ZoomIn } from "@element-plus/icons-vue";
import type { UploadFile } from "element-plus";
// 多個組件同時使用的時候做區分
const fileUploadId = ref(`ID${Math.floor(Math.random() * 100000)}`);
type UploadFileNew = {[Property in keyof UploadFile]: UploadFile[Property];
} & {type: string;viewUrl: string | undefined;needUpload: boolean;duration: number;width: number;height: number;
};const imageRegex = RegExp(/(jpg|bmp|gif|ico|pcx|jpeg|tif|png|raw|tga)/);
const audioRegex = RegExp(/(mp3|wav|flac|ogg|aac|wma)/);
const videoRegex = RegExp(/(avi|wmv|mpeg|mp4|m4v|mov|asf|flv|f4v|rmvb|rm|3gp|vob)/
);
// 導入視頻組件
import videoComponent from "./videoComponent.vue";
const props = defineProps({// 數量限制limit: {type: Number,default: 1,},// 是否多選multiple: {type: Boolean,default: false,},// 要選擇的文件類型fileType: {type: String,required: true,validator(value: string) {return ["audio", "image", "video"].includes(value);},},// 追加的提示appendTip: {type: String,default: "",},widthLimit: {type: Number,default: 0,},heightLimit: {type: Number,default: 0,},
});
// 可上傳文件類型
const accept = ref("");
// 最大上傳文件大小
const maxSize = ref(0);
const tip = ref("");
// 根據類型設置默認值
if (props.fileType) {switch (props.fileType) {case "image":accept.value = ".png, .jpg, .jpeg";maxSize.value = 20;tip.value = `請上傳${accept.value}格式的文件，圖片大小不能超過${maxSize.value}MB。${props.appendTip}`;break;case "audio":accept.value = ".mp3, .wma, .aac, .flac, .ape";maxSize.value = 500;tip.value = `請上傳${accept.value}格式的文件，音頻大小不能超過${maxSize.value}MB。${props.appendTip}`;break;case "video":accept.value = ".mp4, .rmvb, .avi, .mov";maxSize.value = 500;tip.value = `請上傳${accept.value}格式的文件，視頻大小不能超過${maxSize.value}MB。${props.appendTip}`;break;case "musiVideo":accept.value = ".mp4, .rmvb, .avi, .mov, .mp3, .wma, .aac, .flac, .ape";maxSize.value = 500;tip.value = `請上傳${accept.value}格式的文件，音視頻大小不能超過${maxSize.value}MB。${props.appendTip}`;break;default:throw new Error("類型錯誤");}
}
const isShow = ref(true);
const elUploadElement = ref();
// 控制圖片預覽的路徑
const previewFile = ref();
// 控制是否顯示圖片預覽的彈窗
const dialogVisible = ref(false);
// 雙向綁定的文件列表
const fileList = ref<UploadFileNew[]>([]);
// 定義組件ref
const videoRef = ref(),audioRef = ref();
async function onChange(uploadFile: UploadFileNew,uploadFiles: UploadFileNew[]
) {// 如果是遠程原件不需要任何處理if (!uploadFile.name) return;isShow.value = false;const suffix = uploadFile.name.split(".").at(-1) as string;if (videoRegex.test(suffix.toLocaleLowerCase())) {const res = (await findvideodetail(uploadFile.url as string)) as {viewUrl: string;duration: number;};uploadFile.type = "video";uploadFile.viewUrl = res.viewUrl;uploadFile.duration = res.duration;} else if (imageRegex.test(suffix)) {uploadFile.type = "image";uploadFile.viewUrl = uploadFile.url;const res = (await findImageDetail(uploadFile.url as string)) as {width: number;height: number;};uploadFile.width = res.width;uploadFile.height = res.height;} else if (audioRegex.test(suffix)) {uploadFile.type = "audio";uploadFile.viewUrl = new URL("@/assets/goods/audio.svg",import.meta.url).href;const res = (await findAudioDetail(uploadFile.url as string)) as {duration: number;};uploadFile.duration = res.duration;}console.log(uploadFile);uploadFile.needUpload = true;fileList.value = uploadFiles;isShow.value = true;verifyLength();
}// 刪除文件
function handleRemove(uploadFile: UploadFile) {elUploadElement.value.handleRemove(uploadFile);verifyLength();
}// 檢驗已選擇的文件數量是否超過閾值，并做顯示/隱藏處理
function verifyLength() {const element = document.querySelector(`#${fileUploadId.value} .el-upload--picture-card`) as HTMLDivElement;console.log(fileUploadId.value, element);if (fileList.value.length === props.limit) {element.style.visibility = "hidden";} else {element.style.visibility = "visible";}
}// 預覽文件
const handlePictureCardPreview = (file: UploadFile) => {previewFile.value = file;dialogVisible.value = true;
};//截取視頻第一幀作為播放前默認圖片
function findvideodetail(url: string) {const video = document.createElement("video"); // 也可以自己創建videovideo.src = url; // url地址 url跟 視頻流是一樣的const canvas = document.createElement("canvas"); // 獲取 canvas 對象const ctx = canvas.getContext("2d"); // 繪制2dvideo.crossOrigin = "anonymous"; // 解決跨域問題，也就是提示污染資源無法轉換視頻video.currentTime = 1; // 第一幀return new Promise((resolve) => {video.oncanplay = () => {canvas.width = video.clientWidth || video.width || 320; // 獲取視頻寬度canvas.height = video.clientHeight || video.height || 240; //獲取視頻高度// 利用canvas對象方法繪圖ctx!.drawImage(video, 0, 0, canvas.width, canvas.height);// 轉換成base64形式const viewUrl = canvas.toDataURL("image/png"); // 截取后的視頻封面resolve({viewUrl: viewUrl,duration: Math.ceil(video.duration),width: video.width,height: video.height,});video.remove();canvas.remove();};});
}
//截取視頻第一幀作為播放前默認圖片
function findAudioDetail(url: string) {const audio = document.createElement("audio"); // 也可以自己創建videoaudio.src = url; // url地址 url跟 視頻流是一樣的audio.crossOrigin = "anonymous"; // 解決跨域問題，也就是提示污染資源無法轉換視頻return new Promise((resolve) => {audio.oncanplay = () => {resolve({duration: Math.ceil(audio.duration),});audio.remove();};});
}
//
function findImageDetail(url: string) {const img = document.createElement("img"); // 也可以自己創建videoimg.src = url; // url地址 url跟 視頻流是一樣的return new Promise((resolve) => {img.onload = () => {resolve({width: img.width,height: img.height,});img.remove();};});
}type validateReturnValue = {code: number;success: boolean;msg: string;
};
// 驗證文件格式
function verification(): validateReturnValue {if (fileList.value.length <= 0) {return {code: 0,success: false,msg: "請選擇上傳文件",};}if (fileList.value.length > props.limit) {return {code: 0,success: false,msg: `文件數量超出限制，請上傳${props.limit}以內的文件`,};}for (let i = 0; i < fileList.value.length; i++) {const element = fileList.value[i];if (!element.needUpload) break;const suffix = element.name.split(".").at(-1) as string;if (!accept.value.includes(suffix.toLowerCase())) {return {code: 0,success: false,msg: `文件類型不正確，請上傳${accept.value}類型的文件`,};}if ((element.size as number) / 1024 / 1024 > maxSize.value) {return {code: 0,success: false,msg: "文件大小超出限制",};}if (element.type === "image") {if (props.widthLimit && element.width != props.widthLimit) {return {code: 0,success: false,msg: `圖片寬度不等于${props.widthLimit}像素`,};}if (props.heightLimit && element.height != props.heightLimit) {return {code: 0,success: false,msg: `圖片高度不等于${props.heightLimit}像素`,};}}}return {code: 200,success: true,msg: "格式正確",};
}// 添加遠程圖片
async function addFileList(url: string, name?: string) {const uploadFile: any = {url,name,};const suffix = url.split(".").at(-1) as string;if (videoRegex.test(suffix.toLocaleLowerCase())) {const res = (await findvideodetail(url)) as {viewUrl: string;};uploadFile.type = "video";uploadFile.viewUrl = res.viewUrl;} else if (imageRegex.test(suffix)) {uploadFile.type = "image";uploadFile.viewUrl = uploadFile.url;} else if (audioRegex.test(suffix)) {uploadFile.type = "audio";uploadFile.viewUrl = new URL("@/assets/goods/audio.svg",import.meta.url).href;}uploadFile.needUpload = false;fileList.value.push(uploadFile);verifyLength();
}
// 關閉彈窗的時候停止音視頻的播放
function close() {if (previewFile.value.type === "audio") {audioRef.value.pause();}if (previewFile.value.type === "video") {videoRef.value.pause();}
}
// 打開彈窗的時候修改視頻路徑和封面
function open() {if (previewFile.value.type === "video") {videoRef.value.changeUrl();}
}
// 獲取文件對象
function getFiles(): UploadFileNew[] {return fileList.value;
}
defineExpose({getFiles,verification,addFileList,handlePictureCardPreview,handleRemove,
});
</script>
3 視頻組件
<script setup lang="ts">
import { onMounted } from "vue";import Player from "xgplayer";
import "xgplayer/dist/index.min.css";const props = defineProps({// 視頻路徑url: {type: String,},// 封皮poster: {type: String,},
});
let player: any;
onMounted(() => {player = new Player({id: "mse",lang: "zh",// 默認靜音volume: 0,autoplay: false,screenShot: true,videoAttributes: {crossOrigin: "anonymous",},url: props.url,poster: props.poster,//傳入倍速可選數組playbackRate: [0.5, 0.75, 1, 1.5, 2],});
});
// 對外暴露暫停事件
function pause() {player.pause();
}
// 對外暴露修改視頻源事件
function changeUrl() {player.playNext({url: props.url,poster: props.poster,});
}
defineExpose({ pause, changeUrl });
</script><template><div id="mse" />
</template><style scoped>
#mse {flex: auto;margin: 0px auto;
}
</style>
4 Demo
<script setup lang="ts">
import { ref, onMounted } from "vue";
import FileUpload from "./FileUpload/index.vue";
import type { FormInstance } from "element-plus";
// el-form實例
const ruleFormRef = ref();
// form綁定參數
const formData = ref({headImage: undefined,headImageList: [],
});// ------上傳文件校驗用 start-------
const FileUploadRef = ref();
let uploadRules = ref();
const isShowUpLoad = ref(true);
onMounted(() => {isShowUpLoad.value = false;uploadRules = ref([{validator(rule: any, value: any, callback: any) {const res = FileUploadRef.value.verification();if (!res.success) {callback(new Error(res.msg));}setTimeout(() => {callback();}, 500);},trigger: "blur",},// 需要顯示出星號，但是由于沒有做數據綁定，所以放在后邊{ required: true, message: "請上傳頭像", trigger: "blur" },]);isShowUpLoad.value = true;
});
// ------上傳文件校驗用 end-------const submitLoading = ref(false);
function submitForm(ruleFormRef: FormInstance) {// 避免必需的校驗無法通過formData.value.headImageList = FileUploadRef.value.getFiles();ruleFormRef.validate(async (valid) => {if (valid) {submitLoading.value = true;const params = { ...formData.value };// 單文件這么寫，多文件需要循環if (params.headImageList[0].needUpload)params.headImage = await uploadFile(params.headImageList[0].raw);delete params.headImageList;submitLoading.value = false;}});
}
function uploadFile(file: File) {return "路徑";
}
</script>
<!-- -->
<template><el-formref="ruleFormRef":model="formData"label-width="120px"v-loading="submitLoading"element-loading-text="數據傳輸中..."style="margin-top: 20px;"><el-form-itemlabel="頭像"prop="headImageList":rules="uploadRules"v-if="isShowUpLoad"><FileUpload ref="FileUploadRef" :multiple="false" fileType="image" /></el-form-item><el-form-item label=""><el-button>取 消</el-button><el-button type="primary" @click="submitForm(ruleFormRef)">確 認</el-button></el-form-item></el-form>
</template>
<style lang="scss" scoped></style>
