js上传文件、文件夹

一、html

<el-button type="primary" class="upload-file">
  上传文件
  <input
    ref="file_ref"
    type="file"
    class="file-input"
    multiple
    @change="uploadFile($event, true)"
  />
</el-button>
<el-button type="primary" class="upload-file">
  上传文件夹
  <input
    ref="folder_ref"
    type="file"
    class="file-input"
    webkitdirectory
    @change="uploadFile($event, false)"
  />
</el-button>

二、css

  .upload-file {
    position: relative;
    .file-input {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
    }
  }

三、js

  // 上传文件夹
  const file_ref = ref()
  const folder_ref = ref()

  const uploadFile = (e, is_file) => {
    const path = info.filePathList.join('/')
    const pathValue = path ? `root/` + path : ''
    let file_lists = Object.values(e.target.files)
    console.log(file_lists)
    if (file_lists.length > 0) {
      file_lists.forEach((item) => {
        const formData = new FormData()
        formData.append('fileName', item.name)
        formData.append('file', item)
        formData.append('filePath', pathValue)
        if (!is_file) {
          let folderName = item.webkitRelativePath.split('/')
          folderName.pop()
          formData.append('dirName', folderName.join('/'))
        }

        workUpload(formData)
          .then((res) => {})
          .catch((err) => {
            console.log(err)
          })
      })
      nextTick(() => {
        file_ref.value.value = null
        folder_ref.value.value = null
      })
      proxy.$message({
        message: '已添加至传输列表',
        type: 'success',
      })
    }
  }

//filePathList 文件目录list