自定义input组件如何实现拖拽文件上传

目录

• 自定义input组件实现拖拽文件上传
• vue部分
• 逻辑部分
• 删除当前文件
• 封装的tag-input组件
• 最后实现的效果
• 多图上传组件vue
• 组件template部分
• 组件script部分
• 组件使用
• 组件完整代码（含裁剪组件，不需要请手动删除）
• 效果展示
• 总结

自定义input组件实现拖拽文件上传

vue部分

逻辑部分

页面加载时监听拖拽事件，监听后将文件放置下发fileList参数列表中

  mounted() {
    setTimeout(() => {
      this.$nextTick(() => {
        if (this.$refs.uploadTag) {
          let dropEle = this.$refs.uploadTag.$el
 
          // 禁止拖拽文件后打开文件
          dropEle.addEventListener('drop', e => {
            e.preventDefault();
            e.stopPropagation();
          }, false)
 
          dropEle.addEventListener('dragover', e => {
            e.preventDefault();
            e.stopPropagation();
          }, false)
 
          dropEle.addEventListener('dragleave', e => {
            e.preventDefault();
            e.stopPropagation();
          }, false)
 
          // 处理拖拽文件的逻辑
          dropEle.addEventListener('drop', e => this.watchFileUpload(e))
        }
      })
    }, 1000)
  }

  // 拖拽上传
  private watchFileUpload(e) {
    e.preventDefault();
    e.stopPropagation();
 
    var df = e.dataTransfer;
    var dropFiles = []; // 拖拽的文件，会放到这里
    var dealFileCnt = 0; // 读取文件是个异步的过程，需要记录处理了多少个文件了
    var allFileLen = df.files.length; // 所有的文件的数量，给非Chrome浏览器使用的变量
 
    // 检测是否已经把所有的文件都遍历过了
    function checkDropFinish() {
      dealFileCnt++;
    }
 
    if (df.items !== undefined) {
      // Chrome拖拽文件逻辑
      for (var i = 0; i < df.items.length; i++) {
        var item = df.items[i];
        if (item.kind === "file" && item.webkitGetAsEntry().isFile) {
          var file = item.getAsFile();
          dropFiles.push(file);
        }
      }
    } else {
      // 非Chrome拖拽文件逻辑
      for (var i = 0; i < allFileLen; i++) {
        var dropFile = df.files[i];
        if (dropFile.type) {
          dropFiles.push(dropFile);
          checkDropFinish();
        } else {
          try {
            var fileReader = new FileReader();
            fileReader.readAsDataURL(dropFile.slice(0, 3));
 
            fileReader.addEventListener('load', function (e) {
              console.log(e, 'load');
              dropFiles.push(dropFile);
              checkDropFinish();
            }, false);
 
            fileReader.addEventListener('error', function (e) {
              console.log(e, 'error，不可以上传文件夹');
              checkDropFinish();
            }, false);
 
          } catch (e) {
            console.log(e, 'catch error，不可以上传文件夹');
            checkDropFinish();
          }
        }
      }
    }
    dropFiles.forEach(item => {
      this.fileList.push(item)
    })
    this.fileNameList = this.fileList.map(item => {
      if (item.name) {
        return item.name
      }
      if (item.fileName) {
        return item.fileName
      }
    });
  }

删除当前文件

  // 附件删除 下拉框
  private removeFile(nameList, name) {
    // 记录删除的附件信息
    this.fileList.splice(this.fileList.findIndex(item => item.fileName === name || item.name === name), 1)
    this.fileNameList = this.fileList.map(item => item.name || item.fileName);
  }

封装的tag-input组件

最后实现的效果

可支持手动拖拽上传 

多图上传组件vue

小编参加的第一个项目，就遇到了麻烦的多图上传，通过多天的努力，写出了一个多图的组件，希望可以帮助到大家

组件template部分

多图上传按钮+多图上传弹窗+图片上的预览删除图标

组件script部分

1.变量数据区域

代码如下（示例）：

效果展示

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。