株洲网络公司-网站建设怎么样,做网站南京,长沙 网站设计 公司价格,一个ip做几个网站一、页面样式#xff1a; #xff08;1#xff09;点击前#xff1a; #xff08;2#xff09;点击后#xff1a;
设计#xff1a;①自定义elementPlus图标#xff1b;②使用Tooltip实现鼠标悬浮按钮上出现文字提示#xff1b;③上传与更换的切换样式#xff1b;…一、页面样式 1点击前 2点击后
设计①自定义elementPlus图标②使用Tooltip实现鼠标悬浮按钮上出现文字提示③上传与更换的切换样式 前端通过chooseVideo与chooseVideoFile这两个方法分别去①限制点击上传的文件类型②获取到上传的文件this.fileInfo.selectedFile与this.fileInfo.selectedVideoFile传给后端进一步处理③通过拿到的文件直接可以fileInfo.selectedFile.name获取到文件名 二、前端代码
el-dialog v-modeladdVideoFile :before-closecloseDialog title新增视频 width800pxel-form :modelfileInfo label-positionleft label-width100pxel-form-item label视频span v-iffileInfo.selectedFile stylemargin-right: 5px;color: black{{fileInfo.selectedFile.name}}/spanel-button typeprimary clickchooseVideo{{ fileInfo.selectedFile ? 更换视频 : 上传视频 }}el-icon classel-icon--rightUploadFilled //el-icon/el-button/el-form-itemel-form-item label压缩包span v-iffileInfo.selectedVideoFile stylemargin-right: 5px;color: black{{fileInfo.selectedVideoFile.name}}/spanel-tooltip content支持word/excel/pdf/zip/exe/md/rar/mp4/txt文件 placementbottom effectlightel-button typeprimary clickchooseVideoFile{{ fileInfo.selectedVideoFile ? 更换压缩包 : 上传压缩包 }}el-icon classel-icon--rightBriefcase //el-icon/el-button/el-tooltip/el-form-item/el-formtemplate #footerspan classdialog-footerel-button clickaddVideoFile false; 取消/el-buttonel-button typeprimary clickaddVideoList确认/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(() {})}},三、后端代码 调用了文件处理的封装方法哈哈
