web前端之上传文件夹、webkitdirectory
智码帮MJ682517 2024-08-05 08:03:02 阅读 56
MENU
前言element-ui写法input写法
前言
1、以下代码只实现的单个文件夹的上传,原本需求是实现选择多个文件夹上传,但是没找到实现的方法。如果想实现多个文件夹上传,可以给这些文件夹新建一个父级文件夹,点击上传的时候选择父级文件夹,就能遍历该父级文件夹下的所有子集文件夹,这样就能实现多个文件夹上传了。
2、其他文章链接,文章内容并没有去实践,有兴趣的伙伴可以看看。
element-ui写法
html
<code><el-upload
class="upload-demo"code>
action="#"code>
:on-remove="fileRemove"code>
:on-change="fileChang"code>
accept=""code>
:auto-upload="false"code>
:multiple="true"code>
:file-list="form.instFilePics"code>
ref="uploadFile"code>
>
<el-button size="small" type="primary">code>
<i class="el-icon-folder-opened"></i>code>
</el-button>
</el-upload>
JavaScrip
data() {
return {
form:{
instFilePics:[],
instFile:[]
},
}
},
mounted() {
// 以下代码有时候可能写法不同,
// 可在控制台打印一层一层的找input,
// 再加webkitdirectory属性
this.$refs.uploadFile.$children[0].$refs.input.webkitdirectory = true;
},
methods:{
fileChang(file, fileList, name) {
this.form.instFilePics = fileList;
},
fileRemove(file, fileList, name) {
this.form.instFilePics = fileList
},
}
解析
html
01、
<el-upload>
是一个Element UI的上传组件,用于上传文件。
02、
class="upload-demo"code>为上传组件添加一个CSS类,用于样式定制。
03、
action="#"code>指定上传的服务器地址,这里设置为#,表示不进行实际的上传操作。
04、
:on-remove="fileRemove"code>监听文件被移除的事件,当文件被移除时,调用fileRemove方法。
05、
:on-change="fileChang"code>监听文件变化的事件,当文件发生变化时,调用fileChang方法。
06、
accept=""code>指定可以上传的文件类型,这里为空,表示不限制文件类型。
07、
:auto-upload="false"code>设置为false表示上传操作不会自动进行,需要手动触发。
08、
:multiple="true"code>设置为true表示支持多文件上传。
09、
:file-list="form.instFilePics"code>绑定一个文件列表,这个列表将显示在上传组件中。
10、
ref="uploadFile"code>为上传组件设置一个引用,可以在Vue实例中通过this.$refs.uploadFile访问到这个组件。
JavaScrip
1、
data()
定义组件的数据,其中form对象包含两个数组,instFilePics用于存储上传的文件列表,instFile可能用于其他文件上传的数组。
2、
mounted()
在组件挂载到DOM后执行,通过this.$refs.uploadFile.$children[0].$refs.input.webkitdirectory = true;
设置文件输入框支持选择文件夹。
3、
methods
定义两个方法,fileChang和fileRemove。
3.1、
fileChang(file, fileList, name)
当文件列表发生变化时,更新form.instFilePics
为最新的文件列表。
3.2、
fileRemove(file, fileList, name)
当文件被移除时,更新form.instFilePics
为最新的文件列表。
总结
代码段实现一个文件上传组件,用户可以选择文件或文件夹进行上传,上传的文件列表会显示在界面上。通过fileChang和fileRemove方法,可以处理文件列表的变化和文件的移除操作。
input写法
html
<div class="select-files-btn">code>
<el-button type="primary" @click="choiceFiles">code>
<i class="el-icon-folder-opened"></i>code>
</el-button>
<input ref="filElem" type="file" multiple class="upload-file" webkitdirectory @change="getFile"/>code>
</div>
JavaScrip
methods: {
choiceFiles(){
// 以下代码有时候写法不同,
// 可在控制台打印一层一层的找input
this.$refs.filElem.click();
},
getFile(e){
let files = e.target.files;
console.log(files);
}
}
解析
html
1、
<div class="select-files-btn">code>是一个包含按钮和文件输入框的容器。
2、
<el-button type="primary" @click="choiceFiles">code>是一个Element UI的按钮组件,类型为primary,表示按钮是主要操作按钮。
@click="choiceFiles"code>是一个事件监听器,当按钮被点击时,会调用Vue实例中的choiceFiles方法。
3、
<i class="el-icon-folder-opened"></i>code>是一个图标,使用Element UI的图标类,显示一个打开的文件夹图标。
4、
<input ref="filElem" type="file" multiple class="upload-file" webkitdirectory @change="getFile"/>code>是一个文件输入框,允许用户选择多个文件(multiple属性)。
ref="filElem"code>是一个Vue的引用,允许在Vue实例中直接访问这个DOM元素。
webkitdirectory
属性允许用户选择文件夹,而不是单个文件。@change="getFile"code>是一个事件监听器,当文件选择框的值发生变化时,会调用Vue实例中的getFile方法。
JavaScrip
1、
choiceFiles()
方法会在用户点击按钮时被调用。它通过this.$refs.filElem.click()
模拟点击文件输入框,允许用户选择文件而不直接点击输入框。
2、
getFile(e)
方法会在文件输入框的值发生变化时被调用(即用户选择了文件后)。e.target.files
包含用户选择的所有文件,然后这些文件会被打印到控制台。
总结
代码段提供一个用户界面,允许用户通过点击一个按钮来选择文件或文件夹,并在选择后将文件信息打印到控制台。这通常用于文件上传功能。
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。