js 实现拖拽上传视频（文件同理）

最新推荐文章于 2024-03-12 21:51:49 发布

彦青i

最新推荐文章于 2024-03-12 21:51:49 发布

阅读量315

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_41200374/article/details/130843365

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

html

<div id="uploadVideoBox">
<div>

js

//运用id绑定方法 不需要再去使用queryselectAll查找dom元素
//实现一个拖拽功能要绑定四个方法 dragenter、dragover、dragleave、drop，实现代码要放在drop中，其他三个是为了防止浏览器默认行为，否则拖拽会有bug
    uploadVideoBox.addEventListener('dragenter', function (e) {
      e.stopPropagation();//阻止默认事件
      e.preventDefault();//阻止默认事件
    }, false);//false 参数每个都要加以防个别浏览器报错
    uploadVideoBox.addEventListener('dragover', function (e) {
      e.stopPropagation();
      e.preventDefault();
    }, false);
    uploadVideoBox.addEventListener('dragleave', function (e) {
      e.stopPropagation();
      e.preventDefault();
    }, false);
    uploadVideoBox.addEventListener('drop', function (e) {
      e.stopPropagation();
      e.preventDefault();
     dropImage(e.dataTransfer.files)
    }, false);

//具体上传步骤
//以下$Message 是提示文本框方法，有需要自行修改
    dropImage(fileList) {
      if (fileList.length != 1) {
        this.$Message.warning('最多只能上传一个文件')
        return
      }
      const file = fileList[0];
      const typeList = [".mp4", ".MP4", ".mov", ".MOV", ".avi", ".wmv", ".mpg", ".flv"];
      if (!file) {
        return
      }
      //验证视频格式
      const fileType = file.name.substring(file.name.lastIndexOf('.'))
      console.log('fileType', fileType);
      if (!typeList.includes(fileType)) {
        this.$Message.error('请选择正确格式的视频!')
        return
      }
      //验证视频大小
      if (file.size > 200 * 1024 * 1024) {
        this.$Message.error('上传文件大小不能超过200M!')
        return
      }
      //这是要重新命名
      const time = new Date().getTime()
      const fileName = time + file.name.substring(file.name.lastIndexOf('.'))
      this.videoFile = new File([file], fileName)
      this.$Message.success('选择成功!')
      console.log("newFile", this.videoFile);
    }