element 上传文件夹
时间: 2023-11-18 19:52:50 浏览: 53
在 element 中上传文件夹需要使用 el-upload 组件,并设置属性 type 为 drag,这样用户就可以拖拽文件夹进行上传。同时,需要设置属性 directory 为 true,表示上传的是文件夹而不是单个文件。
示例代码如下:
```
<template>
<el-upload
class="upload-demo"
action="/upload"
:directory="true"
:on-success="handleSuccess"
:before-upload="beforeUpload"
drag>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件夹拖到此处,或<em>点击上传</em></div>
</el-upload>
</template>
<script>
export default {
methods: {
handleSuccess(response, file, fileList) {
console.log(response, file, fileList);
},
beforeUpload(file) {
// 判断是否为文件夹
if (file.webkitRelativePath.indexOf('/') !== -1) {
this.$message.error('请上传文件夹');
return false;
}
return true;
}
}
};
</script>
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)