vue2 + element-ui + 推拽上传文件夹获取文件数据

咸鱼海里游

已于 2024-05-11 15:07:56 修改

阅读量644

点赞数 16

分类专栏： ElementUI 文章标签： javascript 开发语言 vue.js 前端前端框架

于 2024-05-11 14:30:09 首次发布

本文链接：https://blog.csdn.net/weixin_52489038/article/details/138713198

版权

ElementUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 将 Element-ui 中的 Upload 组件引入项目，添加 ref 属性

2. 页面初始化时，通过 this.$refs.uploadFile 获取上传组件内部 input标签并将其 webkitdirectory 属性设置为true，以实现上传文件夹功能。

 mounted() {
     this.$refs.uploadFile.$children[0].$refs.input.webkitdirectory = true 
 },

代码至此，只有通过点击上传文件夹，才能在 onchange 事件中获取到文件夹内每个文件的数据信息，拖拽上传不触发 onchange 事件。

3. 我们可以利用拖拽触发 "drop事件" 来实现本功能，主要为以下三步：

第一步：监听 el-upload-dragger 的drop事件，利用 e.dataTransfer.items 取到上传的每一项文件或文件夹

第二步：循环遍历，判断是文件还是文件夹，如果为文件夹则递归调用getFileFromEntryRecursively 函数，直到所有文件判断结束

第三步：使用 item.webkitGetAsEntry() 获取到文件夹，并使用 reader 读取文件夹中的所有文件

第四步：将获取到的所有 file 根据后端需要的格式进行接口调用即可

详细代码如下：

<body>
    <div id="app">
        <el-upload class="upload-demo a" ref="uploadFile" drag action="" multiple :auto-upload="false"
            :on-change="onFileChange" :multiple="false" :file-list="fileList" :show-file-list="false">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
    </div>

    <script src="../jquery.min.js"></script>
    <script src="../vue.js"></script>
    <script src="../element.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                fileList: []
            },
            mounted() {
                this.$refs.uploadFile.$children[0].$refs.input.webkitdirectory = true
                this.$nextTick(() => {
                    let that = this
                    document.querySelector(".el-upload-dragger").addEventListener("drop", function (e) {
                        let items = e.dataTransfer.items;
                        // console.log("item",items);
                        for (let i = 0; i <= items.length - 1; i++) {
                            let item = items[i];
                            console.log('item', item.webkitGetAsEntry());
                            if (item.kind === "file") {
                                let entry = item.webkitGetAsEntry();
                                that.getFileFromEntryRecursively(entry)
                            }
                        }
                        e.preventDefault();
                    })
                })
            },
            methods: {
                getFileFromEntryRecursively(entry) {
                    if (entry.isFile) {
                        entry.file(file => {
                            console.log(file);
                            let path = entry.fullPath.substring(1);
                        }, e => { console.log(e); });
                    } else {
                        let reader = entry.createReader();
                        reader.readEntries(entries => {
                            entries.forEach(entry => this.getFileFromEntryRecursively(entry));
                        }, e => { console.log(e); });
                    }
                },
                onFileChange(file, filelist) {
                    console.log(file);
                    console.log(filelist);
                }
            }
        })
    </script>
</body>