上传三合一:拖拽上传、上传文件、上传文件夹,一次搞定!

拖拽上传、上传文件、上传文件夹,三合一!

1 拖拽上传

在 drop 事件中通过 e.dataTransfer.items 递归获取拖拽的文件(夹)。具体看这篇文章:拖拽本地文件夹到浏览器中,展示所有文件结构

上传三合一:拖拽上传、上传文件、上传文件夹,一次搞定!_第1张图片

2 上传文件

代码:

<template>
  <section>
    
    <input type="file" multiple id="uploadFile" @change="handleChange" />
  section>
template>
<script>
export default {
  methods: {
    handleChange() {
      let files = document.getElementById("uploadFile").files; // FileList 伪数组对象
      for (let i = 0; i <= files.length - 1; i++) {
        let file = files[i];  // File 对象
        console.log(file);
      }
    }
  }
};
script>

效果:
上传三合一:拖拽上传、上传文件、上传文件夹,一次搞定!_第2张图片

3 上传文件夹

代码:

<template>
  <section>
    
    <input type="file" webkitdirectory id="uploadFile" @change="handleChange" />
  section>
template>
<script>
export default {
  methods: {
    handleChange() {
      let files = document.getElementById("uploadFile").files; // FileList 伪数组对象
      for (let i = 0; i <= files.length - 1; i++) {
        let file = files[i]; // File 对象
        console.log(file);
      }
    }
  }
};
script>

File 对象的 webkitRelativePath 属性是文件的相对路径
效果:
上传三合一:拖拽上传、上传文件、上传文件夹,一次搞定!_第3张图片

4 三合一

这三种上传途径,最终都拿到 File 对象:

途径 得到 File 对象的过程
拖拽上传 在 drop 事件中获取 e.dataTransfer.items ,是一个 DataTransferItemList 对象,遍历得到 DataTransferItem 对象
webkitGetAsEntry 方法得到 FileSystemEntry 对象
根据 isFile 属性判断 entry 是文件还是文件夹。是文件的话,用 file 方法获取 File 对象;是文件夹的话,递归地用 reader 读取包含的文件
上传文件 在 change 事件中获取 input.files ,是一个 FileList 对象,遍历得到 File 对象
上传文件夹 同上

但是,文件的相对路径格式不统一,需要处理,统一格式为 文件夹1/文件夹2/a.txt

途径 相对路径 说明
拖拽上传 entry.fullPath.substring(1) file.webkitRelativePath 都是空。所以从 entry 中取,注意要把 entry.fullPath 最前面的斜杠去掉
上传文件 file.name file.webkitRelativePath 都是空。直接用 file.name
上传文件夹 file.webkitRelativePath file.webkitRelativePath 就是想要的格式,直接用

三合一代码:


class SuperUploader{

    constructor({ uploadFileEl, uploadDirectoryEl, dropAreaEl, successCallback }) {
        uploadFileEl && this.initUploadFile(uploadFileEl, successCallback);
        uploadDirectoryEl && this.initUploadDirectory(uploadDirectoryEl, successCallback);
        dropAreaEl && this.initDragAndDrop(dropAreaEl, successCallback);
    }


    initUploadFile(el, successCallback) {
        const oRealButton = document.createElement("input");
        oRealButton.setAttribute("type", "file");
        oRealButton.setAttribute("multiple", true);
        oRealButton.style.display = "none";
        oRealButton.addEventListener("change", e => {
            let files = oRealButton.files;
            for (let i = 0; i <= files.length - 1; i++) {
                let file = files[i];
                // 这里的 file.webkitRelativePath 都是 "" ,不是我们想要的.要用 file.name
                successCallback({ file, path: file.name });
            }
        })
        document.body.appendChild(oRealButton);
        el.addEventListener("click", e => {
            oRealButton.click();
        });
    }

    initUploadDirectory(el, successCallback) {
        const oRealButton = document.createElement("input");
        oRealButton.setAttribute("type", "file");
        oRealButton.setAttribute("webkitdirectory", true);
        oRealButton.style.display = "none";
        oRealButton.addEventListener("change", e => {
            let files = oRealButton.files;
            for (let i = 0; i <= files.length - 1; i++) {
                let file = files[i];
                // 这里的 file.webkitRelativePath 就是我们想要的格式
                successCallback({ file, path: file.webkitRelativePath });
            }
        })
        document.body.appendChild(oRealButton);
        el.addEventListener("click", e => {
            oRealButton.click();
        });
    }

    initDragAndDrop(el, successCallback) {
        el.addEventListener("dragover", e => {
            e.preventDefault();
        });
        el.addEventListener("drop", e => {
            let items = e.dataTransfer.items;
            for (let i = 0; i <= items.length - 1; i++) {
                let item = items[i];
                if (item.kind === "file") {
                    let entry = item.webkitGetAsEntry();
                    this.getFileFromEntryRecursively(entry, successCallback);
                }
            }
            e.preventDefault();
        });
    }

    getFileFromEntryRecursively(entry, successCallback) {
        if (entry.isFile) {
            entry.file(file => {
                // 这里的 file.webkitRelativePath 都是 "" ,不是我们想要的.
                // entry.fullPath 是前面带斜杠的,要把斜杠去掉的
                let path = entry.fullPath.substring(1);
                successCallback({ file, path });
            }, e => { console.log(e); });
        } else {
            let reader = entry.createReader();
            reader.readEntries(entries => {
                entries.forEach(entry => this.getFileFromEntryRecursively(entry, successCallback));
            }, e => { console.log(e); });
        }
    }
}

使用:

<style>
    span {
        border: 1px solid;
    }
    .dropArea {
        border: 10px dashed;
        height: 150px;
    }
style>
<span id="uploadFileButton">上传文件span>
<span id="uploadDirectoryButton">上传文件夹span>
<section class="dropArea" id="dropArea">把文件拽进来section>
<script>
    new Superloader({
        uploadFileEl: document.getElementById("uploadFileButton"),
        uploadDirectoryEl: document.getElementById("uploadDirectoryButton"),
        dropAreaEl: document.getElementById("dropArea"),
        // “三合一”的成功回调,参数 file:文件实体,path:相对路径
        successCallback: ({ file, path }) => {
            console.log("文件名称:" + file.name + ",相对路径:" + path);
        },
    });
script>

你可能感兴趣的:(杂七杂八啥都学,经验思路总结)