<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 = falseif (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_idrequest({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_idrequest({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 + '/' + filedb.session.commit()return jsonify({"code": "200","data": "","msg": "文件上传成功"})