vue+elementui upload上传文件夹_el-upload上传文件夹

vue+elementui upload上传文件夹

功能需求：利用vue3+elementui里的upload组件，实现上传图片文件夹，需要限制图片格式为png,jpg等，且不需要深层遍历子文件夹，只上传第一层级的文件夹内容即可。比如下面图片举例： 只上传1.png, 2.png 不用深入上传“子文件夹”中的图片。

实现思路： 利用webkitdirectory属性，实现上传文件夹功能

template部分代码：

 <el-upload
     class="upload-demo"
     ref="upload"
     action=""
     multiple
     :limit="9999999"
     :http-request="httpRequest"
     :before-upload="beforeUpload"
 >
   <el-button  type="primary"  style="width: 100px" >上传文件夹</el-button>
   <template #tip>
     <div class="el-upload__tip">
       提示：图片格式为.png, .jpg
     </div>
   </template>
 </el-upload>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

js部分：

import {ref, onMounted} from "vue";
onMounted(()=>{
 document.getElementsByClassName(  "el-upload__input"  )[0].webkitdirectory = true; //布尔值，true: 选择文件夹，false: 选中文件
})

const imgList = ref([]); //设置存图片的数组
const picFormatLimit = ['jpg','png'];
const httpRequest = (param): void => {   }
//分别判断文件夹内每一张图片
const beforeUpload = (file): boolean => {
	//根据文件地址，判断是否是第一层级文件夹
   let folderName = file.webkitRelativePath.split("/")?.[1];
      if(folderName ){
          let format = folderName .substring(folderName .lastIndexOf('.') + 1).toLowerCase(); //取后缀名
          if(picFormatLimit.includes(format)){ //只取文件夹下第一层级数据，不用深度遍历
              imgList.value.push(file);
              return true; //为true，可以继续上传
          }else{
              return false; //为false，不继续上传
          }
      }
      return true;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23