el-upload实现上传文件夹

背景:如图一所示,最下面有一个黄色上传文件按钮,为手动上传而且上传区域有上传文件和上传文件夹的区分

所以需要在点击了上传文件夹做特殊处理使得el-upload可以上传文件夹

一、template区域

                        <el-uploadclass="upload-file"dragmultipleref="uploadRef":directory="true"v-show="uploadTypeIndex != 2 && fileArray.length == 0 && !isUpload":file-list="fileArray":auto-upload="false":show-file-list="false":before-upload="handleBeforeUpload":http-request="handleUploadFile":on-change="handleFileChange"accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/pdf, text/plain, text/markdown"><div class="upload-node w-full h-full" @click="handlePreview"><app-svg-icon icon-name="filled-add" class="w-48 h-48 cursor-pointer upload-node-icon" /></div></el-upload>

二、逻辑区域 

01.在拖拽上传的区域绑定一个点击事件handlePreview,(注意不要直接绑定在el-upload区域,会被触发到两次)

const handlePreview = () => {let inputDom: any = nullnextTick(() => {if (document.querySelector('.el-upload__input') != null) {inputDom = document.querySelector('.el-upload__input')if (uploadTypeIndex.value == 1) {inputDom.webkitdirectory = true} else {inputDom.webkitdirectory = false}}})
}
//点击上传文件夹就将document.querySelector('.el-upload__input')获取到的webkitdirectory 设置为true,选择文件时浏览器就会只筛选文件夹
//点击上传文件就将document.querySelector('.el-upload__input')获取到的webkitdirectory 设置为false

02.此时在el-upload的上传文件方法下面就可以请求后端上传文件

 :http-request="handleUploadFile"

// 上传文件
const handleUploadFile = ({ file }) => {console.log(file, '---fie')//有几个文件就触发了几次uploadFileFunc(file)
}function uploadFileFunc(file: any) {const formData = new FormData()formData.append('field1', '111')formData.append('file', file)formData.append('field2', '222') //此次携带参数请求axios({url: 'yourUrl',method: 'POST',headers: {'Content-Type': 'application/x-www-form-urlencoded',},data: formData,}).then(res => {if (res != null && res.status == 200) {//成功后的逻辑}})
}

此时我发现我点击上传单个文件或者选取多个文件上传时是可以成功上传的,在handleUploadFile事件中打印的file长这样:webkitRelativePath:" "

上传文件夹时,打印出来的file长这样:webkitRelativePath: "新建文件夹/111111111111111111.txt"

后端直接返回提示 说找不到该文件,所以怀疑就是因为文件path的原因,所以直接将file的webkitRelativePath改为空字符串即可

但是由于file 对象的属性是只读的,所以无法直接修改 file.webkitRelativePath 的值。如果想在前端上传文件夹时去掉文件的路径信息,可以使用 File 构造函数创建一个新的文件对象,只保留文件本身,而不包含路径信息。

修改后的代码如下

// 上传文件
const handleUploadFile = ({ file }) => {console.log(file, '---fie')let fieClone = new File([file], file.name)//这里就可以文件夹中的每个文件都创建为一个新的 File 对象,并且只保留文件本身//有几个文件就触发了几次uploadFileFunc(fieClone)//传新的File对象
}function uploadFileFunc(file: any) {const formData = new FormData()formData.append('field1', '111')formData.append('file', file)formData.append('field2', '222') //此次携带参数请求axios({url: 'yourUrl',method: 'POST',headers: {'Content-Type': 'application/x-www-form-urlencoded',},data: formData,}).then(res => {if (res != null && res.status == 200) {//成功后的逻辑}})
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/113467.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【COMP305 LEC 3 LEC 4】

LEC 3 A basic abstract model for a biological neuron 1. Weights of connections Neuron gets fired if it has received from the presynaptic neurons 突触前神经元 a summary impulse 脉冲, which is above a certain threshold. Signal from a single synapse突触 ma…

docker 构建jar包/vue镜像以及发布

1、maven 对项目进行jar/war打包&#xff1a; 如&#xff1a;my-notepad-service-1.006.jar 2、构建镜像&#xff1a; 新建Dockerfile内容有&#xff1a; FROM openjdk:8-jdk-alpine # 作者 MAINTAINER Yang douya # jar包添加到镜像中 第一个是maven打包jar 第二个为在镜像中得…

面试八股文:C++ 多态 继承 重载 虚函数

C 支持多态、继承和函数重载&#xff0c;这些是面向对象编程&#xff08;OOP&#xff09;的基本概念。以下是这些概念的简要介绍&#xff1a; 多态&#xff08;Polymorphism&#xff09;&#xff1a; 多态是面向对象编程的核心概念之一&#xff0c;它允许不同的子类对象对相同的…

项目通用pom.xml文件模版

pom.xml模版文件 <?xml version"1.0" encoding"UTF-8"?><project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/…

使用Spire.PDF for Python插件从PDF文件提取文字和图片信息

目录 一、Spire.PDF插件的安装 二、从PDF文件提取文字信息 三、从PDF文件提取图片信息 四、提取图片和文字信息的进阶应用 总结 在Python中&#xff0c;提取PDF文件的文字和图片信息是一种常见的需求。为了满足这个需求&#xff0c;许多开发者会选择使用Spire.PDF插件&…

通过TDE透明加密实现服务器防勒索 安当加密

安当TDE透明加密技术主要应用于对数据库中的数据执行实时加解密的应用场景&#xff0c;特别是在对数据加密有较高要求&#xff0c;以及希望加密后数据库性能影响几乎可以忽略的场景中。 安当TDE透明加密技术的防勒索应用场景可以通过以下步骤进行介绍&#xff1a; 数据保护&am…

《数据结构、算法与应用C++语言描述》-队列的应用-电路布线问题

《数据结构、算法与应用C语言描述》-队列的应用-电路布线问题 问题描述 在 迷宫老鼠问题中&#xff0c;可以寻找从迷宫入口到迷宫出口的一条最短路径。这种在网格中寻找最短路径的算法有许多应用。例如&#xff0c;在电路布线问题的求解中&#xff0c;一个常用的方法就是在布…

AYIT嵌入式实验室2023级C语言训练1-4章训练题

文章目录 前言1. 判断闰年2.(ab-c)*d的计算问题3.计算三角形的周长和面积4.牛牛的等差数列5.判断字母6.网购7. 牛牛的通勤8.获得月份天数9.大小写转换10.KiKi说祝福语11.小乐乐求和12.奇偶统计13.KiKi求质数个数14.乘法表15.牛牛学数列16.牛牛学数列217.数位之和18.魔法数字变换…

企业知识库管理系统怎么做?

21世纪&#xff0c;一个全新的信息化时代&#xff0c;从最初的传统办公到现在的信息化办公&#xff0c;一个世纪的跨越造就了各种大数据的诞生。 知识库系统 在这个数据横行的时代&#xff0c;文档管理产品市场逐渐兴盛起来&#xff0c;企业知识库管理系统作为企业的智慧信息的…

小程序之后台数据动态交互及WXS的使用 (5)

⭐⭐ 小程序专栏&#xff1a;小程序开发专栏 ⭐⭐ 个人主页&#xff1a;个人主页 目录 一.前言 二.后台数据交互 2.1 准备工作 2.1 前台首页数据连接&#xff1a; 三.WXS的使用 今天就分享到这啦&#xff01;&#xff01;&#xff01; 一.前言 本文章续前面的文章的前端界面…

Python数据结构——队列

当涉及到数据结构时&#xff0c;队列&#xff08;Queue&#xff09;是一个常用的工具&#xff0c;它按照“先进先出”&#xff08;FIFO&#xff09;的原则管理元素&#xff0c;允许在队列的一端添加元素&#xff0c;而在另一端取出元素。本文将详细介绍Python中队列数据结构的使…

Kotlin + 协程 + Room 结合使用

文章目录 前言集成Room结合协程的使用总结 一、前言, 现在kotlin 是趋势&#xff0c;那必然就要用到协程&#xff0c;还有就是随着jetpack 的发力&#xff0c;带来了很多好用的库&#xff0c;比如今天提到Room&#xff0c;是一个类似greenDao的数据库。它不但支持kotlin协程…

怎么在爬虫中使用ip代理服务器,爬虫代理IP的好处有哪些?

随着互联网的快速发展&#xff0c;网络爬虫已经成为数据采集、分析和整理的重要工具。然而&#xff0c;随着网络技术的不断发展&#xff0c;许多网站都会采取反爬虫措施&#xff0c;以避免数据被恶意获取。在这种情况下&#xff0c;代理IP服务器就成为了爬虫们的必本备文工将具…

31二叉树-递归遍历二叉树

目录 LeetCode之路——145. 二叉树的后序遍历 分析 LeetCode之路——94. 二叉树的中序遍历 分析 LeetCode之路——145. 二叉树的后序遍历 给你一棵二叉树的根节点 root &#xff0c;返回其节点值的 后序遍历 。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出…

二阶系统时域响应

二阶系统微分方程 二阶系统传递函数 二阶系统单位阶跃响应 过阻尼系统 临界阻尼系统 欠阻尼系统 无阻尼系统 二阶系统阶跃响应仿真 在Matlab中进行仿真&#xff0c;设置不同阻尼比2、1、0.5和0&#xff0c;可以得到结论&#xff1a; 阻尼比越小&#xff0c;系统响应速度越快&…

JavaWeb——IDEA相关配置(Maven配置以及创建自己的第一个Maven项目)

写在前面&#xff1a; 笔者根据狂神说的javaweb视频&#xff0c;一步一步跟着配置IDEA中的Maven&#xff0c;在后面&#xff0c;笔者将讲述自己如何从0配置Maven以及创建自己的第一个Maven项目&#xff0c;笔者将自己的心路历程&#xff0c;包括配置的过程&#xff0c;都以文字…

数字滚动动效(纯HTML5版和Vue版本)

数字从0到指定数字的滚动动效&#xff0c;直接上代码&#xff1b; H5 <!DOCTYPE html> <html> <head><style>/* 设置数字显示的样式 */.counter {font-weight:700;font-size: 36px;color: #333;}</style> </head> <body><div cl…

网络参考资料搬运(3)

(1) Python: 使用Python打开新的终端(terminal)并执行语句 通过Python 打开各系统&#xff08;MAC, LINUX, WINDOWS&#xff09;下的终端 &#xff08;Terminal&#xff09; python执行shell脚本的几种方法 自己写Linux命令 用Python写个Linux系统命令 Python 使用sftp传输文件…

Android切换主题生命周期流程与onSaveInstanceState和onRestoreInstanceState,Kotlin

Android切换主题生命周期流程与onSaveInstanceState和onRestoreInstanceState&#xff0c;Kotlin import android.os.Bundle import android.util.Log import androidx.appcompat.app.AppCompatActivityclass MainActivity : AppCompatActivity() {private val TAG "fly&…

NarrowBERT: Accelerating Masked Language Model Pretraining and Inference

本文是LLM系列文章&#xff0c;针对《NarrowBERT: Accelerating Masked Language Model Pretraining and Inference》的翻译。 NarrowBERT&#xff1a;加速掩蔽语言模型的预训练和推理 摘要1 引言2 NarrowBERT3 实验4 讨论与结论局限性 摘要 大规模语言模型预训练是自然语言处…