一、页面样式：
（1）点击前：
（2）点击后：
设计：①自定义elementPlus图标；②使用Tooltip实现鼠标悬浮按钮上出现文字提示；③上传与更换的切换样式；
前端：通过chooseVideo与chooseVideoFile这两个方法，分别去①限制点击上传的文件类型；②获取到上传的文件this.fileInfo.selectedFile与this.fileInfo.selectedVideoFile传给后端进一步处理；③通过拿到的文件直接可以fileInfo.selectedFile.name获取到文件名；
二、前端代码
<el-dialog v-model="addVideoFile" :before-close="closeDialog" title="新增视频" width="800px">
<el-form :model="fileInfo" label-position="left" label-width="100px">
<el-form-item label="视频：">
<span v-if="fileInfo.selectedFile" style="margin-right: 5px;color: black">{{
fileInfo.selectedFile.name
}}</span>
<el-button type="primary" @click="chooseVideo">
{{ fileInfo.selectedFile ? "更换视频" : "上传视频" }}<el-icon class="el-icon--right"><UploadFilled /></el-icon>
</el-button>
</el-form-item>
<el-form-item label="压缩包：">
<span v-if="fileInfo.selectedVideoFile" style="margin-right: 5px;color: black">{{
fileInfo.selectedVideoFile.name
}}</span>
<el-tooltip content="支持word/excel/pdf/zip/exe/md/rar/mp4/txt文件" placement="bottom" effect="light">
<el-button type="primary" @click="chooseVideoFile">{{ fileInfo.selectedVideoFile ? "更换压缩包" : "上传压缩包" }}<el-icon class="el-icon--right"><Briefcase /></el-icon></el-button>
</el-tooltip>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="addVideoFile = false; ">取消</el-button>
<el-button type="primary" @click="addVideoList">确认</el-button>
</span>
</template>
</el-dialog>
// 点击新增视频
openAddVideoFile(){
this.resetVideoFile();
this.addVideoFile = true;
},
closeDialog() {
this.addVideoFile = false;
},
//清空新增弹框数据
resetVideoFile(){
this.fileInfo.id = null;
this.fileInfo.title = '';
this.fileInfo.content = '';
this.fileInfo.url = '';
},
//点击上传视频
chooseVideo() {
const fileInput = document.createElement("input");
fileInput.style.display = "none";
fileInput.type = "file";
fileInput.accept = "video/*"; // 限制接受所有视频类型
fileInput.onchange = () => {
if (fileInput.files) {
if (this.addVideoFile === true){
this.fileInfo.selectedFile = fileInput.files[0];
console.log("********************this.fileInfo.selectedFile",this.fileInfo.selectedFile);
}
}
fileInput.remove();
};
// 触发文件选择对话框
fileInput.click();
},
chooseVideoFile(){
const fileInput = document.createElement("input");
fileInput.style.display = "none";
fileInput.type = "file";
fileInput.accept = ".doc,.docx,application/pdf,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,.zip,application/x-msdownload,.md,application/x-rar-compressed,video/mp4,text/plain";
fileInput.onchange = () => {
if (fileInput.files) {
if (this.addVideoFile === true){
this.fileInfo.selectedVideoFile = fileInput.files[0];
console.log("********************this.fileInfo.selectedVideoFile",this.fileInfo.selectedVideoFile);
}
}
fileInput.remove();
};
// 触发文件选择对话框
fileInput.click();
},
// 新增视频提交
addVideoList(){
if(this.$dataFormat.isEmpty(this.fileInfo.title)||this.$dataFormat.isEmpty(this.fileInfo.content)||this.$dataFormat.isEmpty(this.fileInfo.selectedVideoFile)){
ElMessage({
message: '请先补全信息',
type: 'warning',
})
return;
}
// 检查是否选择了文件
if (this.fileInfo.selectedFile || this.fileInfo.selectedVideoFile){
let url = "/ArDownLoad/addVideoList";
let data = {
type:2,//查视频管理的所有数据
fileType:'v',//v:视频
title: this.fileInfo.title,
content:this.fileInfo.content,
url:this.fileInfo.selectedFile,
videoUrl:this.fileInfo.selectedVideoFile,
}
this.$request.postForm(url,data).then(res =>{
this.$msg.warning('新增成功!')
this.addVideoFile = false;
this.videoFilter();
}).catch(() => {
})
}
},
三、后端代码
调用了文件处理的封装方法，哈哈
