点击上传文件

一、页面样式:
(1)点击前:
在这里插入图片描述
(2)点击后:
在这里插入图片描述

设计:①自定义elementPlus图标;②使用Tooltip实现鼠标悬浮按钮上出现文字提示;③上传与更换的切换样式;
前端:通过chooseVideochooseVideoFile这两个方法,分别去①限制点击上传的文件类型;②获取到上传的文件this.fileInfo.selectedFilethis.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(() => {
        })
      }

    },

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/527376.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

蓝桥备赛——素数

素数定义 试除法判断 from math import * def if_prime(n):if n==1:return Falsem=int(sqrt(n)+1)for i in range(2,m): #范围是2到根下n+1if n%i==0:return Falsereturn True print(if_prime(5)) 试除法判断素数。就是判断是否除了1和本身还有其他可以整除自己的数,…

模块十三 异常_Object

回顾与重点 模块十二回顾 权限修饰符&#xff1a; public → protected → 默认 → private a. 构造一般用public&#xff1a;便于new对象 b. 成员方法一般用public&#xff1a;便于调用 c. 属性一般用private&#xff1a;封装思想 final&#xff1a;最终的 a. 修饰类&#x…

如何从iPhone恢复已删除的照片

这些照片是我们今天生活中最珍贵的回忆。它们捕捉了我们一生珍惜的时刻。但是&#xff0c;丢失这些记忆可能是毁灭性的&#xff0c;尤其是在不小心从iPhone中删除它们时。 幸运的是&#xff0c;有一些方法可以从iPhone恢复已删除的照片。在这篇博文中&#xff0c;我们将讨论从…

【opencv】示例-detect_mser.cpp 使用 MSER 算法来检测图像中的极值区域

#include <opencv2/core.hpp> // 包含OpenCV核心操作的头文件 #include <opencv2/imgproc.hpp> // 包含图像处理功能的头文件 #include <opencv2/highgui.hpp> // 包含图形用户界面的头文件 #include <opencv2/features2d.hpp> // 包含特征检测相关功能…

【数据结构】考研真题攻克与重点知识点剖析 - 第 5 篇:树与二叉树

前言 本文基础知识部分来自于b站&#xff1a;分享笔记的好人儿的思维导图与王道考研课程&#xff0c;感谢大佬的开源精神&#xff0c;习题来自老师划的重点以及考研真题。此前我尝试了完全使用Python或是结合大语言模型对考研真题进行数据清洗与可视化分析&#xff0c;本人技术…

C# + OpencvSharp4 错误信息收集

异常1&#xff1a; 初次使用&#xff0c;如下代码报错&#xff0c;OpenCvSharp.OpenCvSharpException:“imread failed.” Mat src Cv2.ImRead("Source.png", ImreadModes.Unchanged); 原因&#xff1a;检查Nuget包与OpencvSharp4库相关安装是否完整&#xff0c;…

虚拟地址的设置与应用全攻略

在计算机网络和操作系统中&#xff0c;虚拟地址是一个核心概念&#xff0c;它允许程序在逻辑上拥有连续的内存空间&#xff0c;而无需关心实际的物理内存布局。虚拟地址的引入极大地简化了程序的开发和内存管理&#xff0c;提高了系统的灵活性和安全性。虎观代理将详细解析虚拟…

Spring Boot中整合JodConverter实现文件在线预览

Spring Boot中整合JodConverter实现文件在线预览 1.安装LibreOffice 24.2 下载地址 LibreOffice 是一款功能强大的办公软件&#xff0c;默认使用开放文档格式 (OpenDocument Format , ODF), 并支持 *.docx, *.xlsx, *.pptx 等其他格式。 它包含了 Writer, Calc, Impress, Dra…

java基于微服务的智慧工地管理云平台SaaS源码 数据大屏端 APP移动端

目录 智慧工地云平台概述 智慧工地功能 &#xff08;项目端&#xff09; 一、劳务管理&#xff1a; 二、施工安全管理&#xff1a; 三、视频监控管理&#xff1a; 四、机械安全管理&#xff1a; 五、施工质量管理&#xff1a; 六、绿色文明施工&#xff1a; 七、施工综…

CSS3如何实现雷达扫描图(动态样式)

动态样式控制雷达扫描和暂停&#xff1a; //html部分&#xff1a; <view class"radar" :style"{--state:animationPlayState}"></view>data部分&#xff1a; animationPlayState: paused, methods: changeStatus(){this.animationPlayState …

Failed to start docker.service: Unit is not loaded properly: Invalid argument.

Failed to start docker.service: Unit is not loaded properly: Invalid argument. 未知原因&#xff1a;docker服务无法正常load 解决方式&#xff1a; 卸载docker&#xff0c; 删除docker.service 重新安装docker Docker是一种相对使用较简单的容器&#xff0c;我们可以通过…

证书生成和获取阿里云备案获取密钥流程

1.在java文件夹下 输入 cmd 打开命令行窗口 2. keytool -genkey -alias 证书名 -keyalg RSA -keysize 2048 -validity 36500 -keystore 证书名.keystore 输入这一行&#xff0c;把证书名三个字 改成 项目的名称&#xff08;例如&#xff1a;D23102802&#xff09; 3. 密码默认填…

【会议】Oracle自动化运维峰会

2023年7月21日&#xff0c;杭州。我组织了Oracle自动化运维峰会&#xff0c;大约有20人左右参加会议。以下是会议主题&#xff1a; Oracle自动化运维能力是Oracle 19c自动化运维体系中非常重要的一环&#xff0c;自动化索引、自动化SQL优化、资源隔离等技术能够非常好的提升运维…

备考ICA----Istio实验17---TCP流量授权

备考ICA----Istio实验17—TCP流量授权 1. 环境准备 1.1 环境部署 kubectl apply -f <(istioctl kube-inject -f istio/samples/tcp-echo/tcp-echo.yaml) -n kim kubectl apply -f <(istioctl kube-inject -f istio/samples/sleep/sleep.yaml) -n kim1.2 测试环境 检测…

使用Python将多张图片转换为动态GIF图像

在本文中&#xff0c;我们将学习如何使用Python编写代码&#xff0c;将多张静态图片转换为一个动态的GIF图像。无论你的图片格式是JPEG&#xff08;.jpg&#xff09;还是PNG&#xff08;.png&#xff09;&#xff0c;我们都将使用Python中的PIL库来实现这一功能。通过本文的学习…

k8s_入门_命令详解

命令详解 kubectl是官方的CLI命令行工具&#xff0c;用于与 apiserver进行通信&#xff0c;将用户在命令行输入的命令&#xff0c;组织并转化为 apiserver能识别的信息&#xff0c;进而实现管理k8s各种资源的一种有效途径 1. 帮助 2. 查看版本信息 3. 查看资源对象等 查看No…

精品PPT-数据治理总体解决方案新版(免费下载)

1、知识星球下载&#xff1a; 如需下载完整PPTX可编辑源文件&#xff0c;请前往星球获取&#xff1a;https://t.zsxq.com/19F4dDDrv 2、免费领取步骤&#xff1a; 【1】关注公众号 方案驿站 【2】私信发送 数据治理新版 【3】获取本方案PDF下载链接&#xff0c;直接下载即可…

【C++】手搓 list 容器

送给大家一句话&#xff1a; 若结局非你所愿&#xff0c;就在尘埃落定前奋力一搏。—— 《夏目友人帐》 手搓 list 容器 1 前言1.1 底层结构1.2 使用场景1.3 功能简介 2 框架搭建2.1 节点类2.2 list 类2.3 迭代器类 3 功能实现3.1 begin() 与 end()3.2 插入操作3.3 删除操作3…

云原生之旅第一课(2站搜索K8s成神之路)

自己动手搭建Kubernetes集群&#xff0c;学习如何自定义CRD&#xff0c;以及使用Kubebuilder快速搭建Operator项目&#xff0c;云原生之旅第一课。从一开始准备录制课程&#xff0c;到如今已经有了500位忠实粉丝&#xff0c;我感到无比欣慰。这门课程完全开源&#xff0c;每一集…

FPN网络

FPN&#xff08;Feature Pyramid Network&#xff09;是一种用于目标检测和语义分割等计算机视觉任务的网络结构。它旨在解决不同尺度下的特征信息不足的问题&#xff0c;提高模型对小目标和远距离目标的检测能力。在目标检测任务中&#xff0c;由于目标的尺度和形状各异&#…