vue3+elementplus+flask 文件夹上传

 <div>
        <input class="fileuploadclass" title="请选择文件夹" ref="file" id="submit" type="file"
               multiple name="" webkitdirectory @change="folderModelOn">
        <el-button type="primary" @click="onUpload" style="margin-left: 10%">证书密钥上传</el-button>
        <ul style="margin-left: 10%; list-style-type: disc;color: #3A3A8AFF" >
          <li v-for="file in files_d" :key="file.name">
           <span> {{ file.name }}</span>
          </li>
        </ul>
      </div>

input 加入这个属性webkitdirectory即可实现选择文件夹上传：

css 

/* 隐藏原生文件选择按钮 */
.fileuploadclass {
  opacity: 0;
  width: 0;
  height: 0;
}

在子组件里先选择文件夹，然后在父组件里新建完成后调用

const folderModelOn = (e) => {
  let files = e.target.files;
  let formData = new FormData();
  for (let i = 0; i < files.length; i++) {  // 每个file append到formdata里
 
    let file1 = files[i];
    let isor = false
    if (file1.name.includes('.pem')) {
 
       for (let [name, file] of formData.entries()) {
             if(file.name.includes(file1.name)){
               isor = true
             }
 
     }
       if(isor === false){
               formData.append('file', file1);
 
       }
 
    } else {
      // if (formData.size ===0){
      //
      // }
      //  // 重置文件选择输入
      // document.querySelector('input[type="file"]').value = '';
      //
      // // 或者直接设置files为空数组
      // files = [];
      ElMessage({
        message: '上传文件必须是.pem的文件',
        type: 'warning',
      })
    }
  }
  formdfileata.push({formdata:formData})
  // 重置文件选择输入
  document.querySelector('input[type="file"]').value = '';
 
  for (let [name, file] of formData.entries()) {
    console.log(name, file);
    let incl  = files_d.value.some((item) => item.name.includes(file.name));
    if(!incl){
      files_d.value.push({name:file.name})
    }
 
 
  }
 
}

const subData = async (row) => {
 
  console.log('提交', row)
  let re = JSON.parse(JSON.stringify(row))
  console.log('提交', employeeRow)
  if (re.draw_name == "新增") {
    await api.postshopInfos(JSON.parse(JSON.stringify(row))).then(item => {
      console.log(item)
      if (item.code === 200) {
        let order_id = item.data['id']
         console.log('获取订单id：：',order_id)
         console.log('子组件：：',proxy.$refs.drawer.formdfileata[0].formdata)
        ElMessage({
          showClose: true,
          message: item.msg,
          type: 'success',
        })
        // let formdatas = proxy.$refs.drawer.formdfileata[0].formdata
        // for (let [name, file] of formdatas.entries()) {
        //   console.log(name, file);
        //
        // }
        let upurl = "/upload"+'?'+"shop_id="+order_id
 
         request({
          method: 'POST',
          url: upurl,
          data: proxy.$refs.drawer.formdfileata[0].formdata,
          headers: {'Content-Type': 'multipart/form-data'}
        }).then(function (res) {
          if (res.code == 200) {
            ElMessage({
              message: '文件夹上传成功',
              type: 'success',
            })
 
 
          }
        })
 
 
 
 
        drawer.value.isClose()
      } else {
        ElMessage.error('添加失败')
      }
    })
  } else {
    await api.putshopInfos(JSON.parse(JSON.stringify(row))).then(item => {
      console.log(item)
      if (item.code === 200) {
        ElMessage({
          showClose: true,
          message: item.msg,
          type: 'success',
        })
        drawer.value.isClose()
         let order_id = item.data['id']
         let upurl = "/upload"+'?'+"shop_id="+order_id
 
         request({
          method: 'POST',
          url: upurl,
          data: proxy.$refs.drawer.formdfileata[0].formdata,
          headers: {'Content-Type': 'multipart/form-data'}
        }).then(function (res) {
          if (res.code == 200) {
            ElMessage({
              message: '文件夹上传成功',
              type: 'success',
            })
 
 
          }
        })
      } else {
        ElMessage.error('修改失败')
      }
    })
  }
  getshopList(config)
 
}

flask 后端：

@users_bp.route("/upload", methods=["POST"])
def upload_file():
    print("-----------------------")
    if request.method == 'POST':
        shop_id = request.args.get('shop_id', '')
        BASE_DIR = os.path.dirname(os.path.realpath(sys.argv[0]))
        if shop_id != "":
            shop_path  = 'utils/cert/'+str(shop_id)
 
            dstpath = os.path.join(BASE_DIR, shop_path)
            if not os.path.exists(dstpath):
                os.makedirs(dstpath)
                print(f"文件夹 {dstpath} 创建成功！")
            else:
                print(f"文件夹 {dstpath} 已经存在。")
        ts = request.files.getlist("file")
        obj = ShopInfo.query.filter(ShopInfo.id==int(shop_id)).first()
 
 
        if len(ts)>0:
            for item in ts:
                secure_filename(item.filename)
                file = item.filename.split('/')[1]
                item.save(dstpath +'/'+ file)
                if 'key' in file:
                   obj.user_account = dstpath + '/' + file
                   db.session.commit()
 
 
 
 
 
        return jsonify({
            "code": "200",
            "data": "",
            "msg": "文件上传成功"
        })