柚子快报激活码778899分享：前端 点击上传文件

柚子快报激活码778899分享：前端 点击上传文件

http://yzkb.51969.com/

一、页面样式： （1）点击前： （2）点击后：

设计：①自定义elementPlus图标；②使用Tooltip实现鼠标悬浮按钮上出现文字提示；③上传与更换的切换样式； 前端：通过chooseVideo与chooseVideoFile这两个方法，分别去①限制点击上传的文件类型；②获取到上传的文件this.fileInfo.selectedFile与this.fileInfo.selectedVideoFile传给后端进一步处理；③通过拿到的文件直接可以fileInfo.selectedFile.name获取到文件名； 二、前端代码

{{

fileInfo.selectedFile.name

}}

{{ fileInfo.selectedFile ? "更换视频" : "上传视频" }}

{{

fileInfo.selectedVideoFile.name

}}

{{ fileInfo.selectedVideoFile ? "更换压缩包" : "上传压缩包" }}

// 点击新增视频

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(() => {

})

}

},

三、后端代码 调用了文件处理的封装方法，哈哈

柚子快报激活码778899分享：前端 点击上传文件

http://yzkb.51969.com/

文章来源