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

自定义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组件

 

 

.input-tag-wrapper {
  position: relative;
  font-size: 14px;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  box-sizing: border-box;
  color: #575757;
  display: inline-block;
  cursor: text;
  outline: none;
  padding: 0 15px;
  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  width: 100%;
  line-height: normal;
  &:hover{
    border-color: #C5C6C7;
  }
  &:focus{
    border-color: #d32f2f;
  }
  .el-tag{
    box-sizing: border-box;
    border-color: transparent;
    margin: 2px 0 2px 6px;
    background-color: #f0f2f5;
    display: inline-flex;
    max-width: 100%;
    align-items: center;
  }
}
 
.tag-input {
  background: transparent;
  border: 0;
  font-size: 14px;
  outline: none;
  padding-left: 0;
  height: 26px;
  &::placeholder {
    color: #C8C9CA;
  }
}
.yh-input-tag--mini{
  height: 26px;
  line-height: 26px;
  .tag {
    height: 16px;
  }
}
 
.yh-input-tag--small{
  height: 30px;
  line-height: 30px;
  .tag {
    height: 20px;
  }
}
 
.yh-input-tag--medium{
  height: 34px;
  line-height: 34px;
  .tag {
    height: 24px;
  }
}
 
// 表单标签选择器必填样式
.el-form-item.is-error .input-tag-wrapper,
.el-form-item.is-error .input-tag-wrapper:focus {
  border-color: #bc1126 !important;
}

最后实现的效果



可支持手动拖拽上传 

多图上传组件vue

组件template部分

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

组件script部分

1.变量数据区域

代码如下（示例）：

.el-dialog{
  width: 50%;
}
.item {
  width: 300px;
  height: 140px;
  position: relative;
  display: flex;
  margin: 10px;

  .delete-icon {
    display: none;
  }
  .refresh-icon {
    display: none;
  }
  .search-icon {
    display: none;
  }
  .scissor-icon {
    display: none;
  }

  &:hover {
    .scissor-icon {
      display: block;
      position: absolute;
      width: 35px;
      height: 40px;
      line-height: 40px;
      left: 100px;
      top: 100px;
      background: rgba(59, 60, 61, 0.5);
      // box-sizing: content-box;
      z-index: 999;
      cursor: pointer;
      text-align: center;
      i {
        margin: 8px 10px 0 0;
        display: block;
        font-size: 24px;
        color: white;
      }
    }
    .delete-icon {
      display: block;
      position: absolute;
      width: 35px;
      height: 40px;
      left: 0px;
      top: 100px;
      background: rgba(59, 60, 61, 0.5);
      // box-sizing: content-box;
      z-index: 999;
      cursor: pointer;
      text-align: center;
      i {
        margin: 8px 10px 0 10px;
        display: block;
        font-size: 24px;
        color: white;
      }
    }
    .refresh-icon {
      display: block;
      position: absolute;
      width: 35px;
      height: 40px;
      left: 35px;
      top: 100px;
      background: rgba(59, 60, 61, 0.5);
      // box-sizing: content-box;
      z-index: 999;
      cursor: pointer;
      text-align: center;
      i {
        margin: 8px 10px 0 0;
        display: block;
        font-size: 24px;
        color: white;
      }
    }
    .search-icon {
      display: block;
      position: absolute;
      width: 65px;
      height: 40px;
      left: 35px;
      top: 100px;
      background: rgba(59, 60, 61, 0.5);
      // box-sizing: content-box;
      z-index: 999;
      cursor: pointer;
      text-align: center;
      i {
        margin: 8px 10px 0 10px;
        display: block;
        font-size: 24px;
        color: white;
      }
    }

  }
}
.imgList {
  border: 1px dashed #d9d9d9;
  border-radius: 5px;
  box-sizing: border-box;
  width: 180px;
  height: 180px;
  margin-top: 0px;
&:hover {
   border: 1px dashed #409eff;
 }
}

// 截图
.cropper-content {
  .cropper {
    width: auto;
    height: 300px;
  }
}

.previewImg {
  width: 50%;
  height: 100%
}

效果展示