前端上传文件夹，接口处一个个上传，第一个文件上传完才开始上传第二个文件

前端上传文件夹，接口处一个个上传，第一个文件上传完才开始上传第二个文件，开始用el-upload进行改造，没成功，就使用了input的type=file来实现该功能，不具备拖拽功能，拖拽的话没有系统提示，为了统一，就没加，提示如下：

大致页面如下：

完整代码：

//template部分
<div class="select-file">
              <span v-if="uploadFiles.length === 0" class="label-tips" @click="toggleFileInput">点击选择文件夹</span>
              <input 
                type="file" 
                id="fileInput" 
                :webkitdirectory="uploadFolder"
                :mozdirectory="uploadFolder"
                :odirectory="uploadFolder"
                @change="changeFiles"
              >
              <span v-if="uploadFiles.length !== 0" class="label-tips">已选择{{ uploadFiles.length }}个文件</span>
            </div>
<el-button type="primary" class="act-btn" @click="handleUploadFiles">上传文件夹</el-button>



//js部分

const uploadFiles = ref([])//上传文件夹的文件
const uploadedLength = ref(0) //已上传文件个数
const uploadFolder = reactive({
  type: Boolean,
  default: false
})
const successCount = ref(0) //成功文件个数
const failCount = ref(0) //文件加载失败个数

//方法
// 手动选择文件夹
//可以使用一些变量记录失败 成功的文件个数，在所有文件上传完之后给出相应的提示
const changeFiles = (event) => {
  console.log('[ files11 ] >', event.target.files)
  uploadFiles.value =  event.target.files
}
const toggleFileInput = () => {
  document.getElementById('fileInput').click();
}
const handleUploadFiles = async () => {
    successCount.value = 0
    failCount.value = 0
  for(let file of uploadFiles.value) {
    try {
      const formData = new FormData()
      formData.append('vs_id', configInfo.knowledge)
      formData.append('files', file)
      const response = await uploadFileApi(formData) //这里是关键
      if (response.code === 200) {
          //这里写成功的逻辑
        successCount.value++
    
      } else {
        failCount.value++
        //失败
      }
    } catch(error) {
       //失败
        failCount.value++
    } finally {
      nextTick(() => {
          const msg = `共上传${uploadedLength.value}个文件， ${successCount.value}个成功，    ${failDocCount.value}个失败`。
    uploadFiles.value = []
      })
    }
  }
}

这样子在tabs里面 代码有点冗余，要是使用一个组件，通过变量控制文件夹或者文件，并带有拖拽功能会更好，大家有更好的可以分享给我，感谢。