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>
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;
}