文件上传，搞懂这8种场景就够了

本文转载自微信公众号「全栈修仙之路」，作者阿宝哥 。转载本文请联系全栈修仙之路公众号。

专注于为中小企业提供网站设计制作、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业汪清免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了成百上千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

在日常工作中，文件上传是一个很常见的功能。在项目开发过程中，我们通常都会使用一些成熟的上传组件来实现对应的功能。一般来说，成熟的上传组件不仅会提供漂亮 UI 或好的交互体验，而且还会提供多种不同的上传方式，以满足不同的场景需求。

一般在我们工作中，主要会涉及到 8 种文件上传的场景，每一种场景背后都使用不同的技术，其中也有很多细节需要我们额外注意。今天阿宝哥就来带大家总结一下这 8 种场景，让大家能更好地理解成熟上传组件所提供的功能。阅读本文后，你将会了解以下的内容：

• 单文件上传：利用 input 元素的 accept 属性限制上传文件的类型、利用 JS 检测文件的类型及使用 Koa 实现单文件上传的功能;
• 多文件上传：利用 input 元素的 multiple 属性支持选择多文件及使用 Koa 实现多文件上传的功能;
• 目录上传：利用 input 元素上的 webkitdirectory 属性支持目录上传的功能及使用 Koa 实现目录上传并按文件目录结构存放的功能;
• 压缩目录上传：在目录上传的基础上，利用 JSZip 实现压缩目录上传的功能;
• 拖拽上传：利用拖拽事件和 DataTransfer 对象实现拖拽上传的功能;
• 剪贴板上传：利用剪贴板事件和 Clipboard API 实现剪贴板上传的功能;
• 大文件分块上传：利用 Blob.slice、SparkMD5 和第三方库 async-pool 实现大文件并发上传的功能;
• 服务端上传：利用第三方库 form-data 实现服务端文件流式上传的功能。

一、单文件上传

对于单文件上传的场景来说，最常见的是图片上传的场景，所以我们就以图片上传为例，先来介绍单文件上传的基本流程。

1.1 前端代码

html

在以下代码中，我们通过 input 元素的 accept 属性限制了上传文件的类型。这里使用 image/* 限制只能选择图片文件，当然你也可以设置特定的类型，比如 image/png 或 image/png,image/jpeg。

 
 
 
 

  
  
  
  
 
  
  
  
  
上传文件 
 
 
 
 

需要注意的是，虽然我们把 input 元素的 accept 属性设置为 image/png。但如果用户把 jpg/jpeg 格式的图片后缀名改为 .png，就可以成功绕过这个限制。要解决这个问题，我们可以通过读取文件中的二进制数据来识别正确的文件类型。

要查看图片对应的二进制数据，我们可以借助一些现成的编辑器，比如 Windows 平台下的 WinHex 或 macOS 平台下的 Synalyze It! Pro 十六进制编辑器。这里我们使用 Synalyze It! Pro 这个编辑器，来查看阿宝哥头像对应的二进制数据。

那么在前端能否不借助工具，读取文件的二进制数据呢?答案是可以的，这里阿宝哥就不展开介绍了。感兴趣的话，你可以阅读 JavaScript 如何检测文件的类型? 这篇文章。另外，需要注意的是 input 元素 accept 属性有存在兼容性问题。比如 IE 9 以下不支持，具体如下图所示：

(图片来源 —— https://caniuse.com/input-file-accept)

js

 
 
 
 

  
  
  
  
const uploadFileEle = document.querySelector("#uploadFile"); 
  
  
  
  
 
  
  
  
  
const request = axios.create({ 
  
  
  
  
  baseURL: "http://localhost:3000/upload", 
  
  
  
  
  timeout: 60000,  
  
  
  
  
}); 
  
  
  
  
 
  
  
  
  
async function uploadFile() { 
  
  
  
  
  if (!uploadFileEle.files.length) return; 
  
  
  
  
  const file = uploadFileEle.files[0]; // 获取单个文件 
  
  
  
  
  // 省略文件的校验过程，比如文件类型、大小校验 
  
  
  
  
  upload({ 
  
  
  
  
    url: "/single", 
  
  
  
  
    file, 
  
  
  
  
  }); 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
function upload({ url, file, fieldName = "file" }) { 
  
  
  
  
  let formData = new FormData(); 
  
  
  
  
  formData.set(fieldName, file); 
  
  
  
  
  request.post(url, formData, { 
  
  
  
  
    // 监听上传进度 
  
  
  
  
    onUploadProgress: function (progressEvent) { 
  
  
  
  
      const percentCompleted = Math.round( 
  
  
  
  
        (progressEvent.loaded * 100) / progressEvent.total 
  
  
  
  
      ); 
  
  
  
  
      console.log(percentCompleted); 
  
  
  
  
     }, 
  
  
  
  
  }); 
  
  
  
  
} 
 
 
 
 

在以上代码中，我们先把读取的 File 对象封装成 FormData 对象，然后利用 Axios 实例的 post 方法实现文件上传的功能。在上传前，通过设置请求配置对象的 onUploadProgress 属性，就可以获取文件的上传进度。

1.2 服务端代码

Koa 是一个简单易用的 Web 框架，它的特点是优雅、简洁、轻量、自由度高。所以我们选择它来搭建文件服务，并使用以下中间件来实现相应的功能：

• koa-static：处理静态资源的中间件;
• @koa/cors：处理跨域请求的中间件;
• @koa/multer：处理 multipart/form-data 的中间件;
• @koa/router：处理路由的中间件。

 
 
 
 

  
  
  
  
const path = require("path"); 
  
  
  
  
const Koa = require("koa"); 
  
  
  
  
const serve = require("koa-static"); 
  
  
  
  
const cors = require("@koa/cors"); 
  
  
  
  
const multer = require("@koa/multer"); 
  
  
  
  
const Router = require("@koa/router"); 
  
  
  
  
 
  
  
  
  
const app = new Koa(); 
  
  
  
  
const router = new Router(); 
  
  
  
  
const PORT = 3000; 
  
  
  
  
// 上传后资源的URL地址 
  
  
  
  
const RESOURCE_URL = `http://localhost:${PORT}`; 
  
  
  
  
// 存储上传文件的目录 
  
  
  
  
const UPLOAD_DIR = path.join(__dirname, "/public/upload"); 
  
  
  
  
 
  
  
  
  
const storage = multer.diskStorage({ 
  
  
  
  
  destination: async function (req, file, cb) { 
  
  
  
  
    // 设置文件的存储目录 
  
  
  
  
    cb(null, UPLOAD_DIR); 
  
  
  
  
  }, 
  
  
  
  
  filename: function (req, file, cb) { 
  
  
  
  
    // 设置文件名 
  
  
  
  
    cb(null, `${file.originalname}`); 
  
  
  
  
  }, 
  
  
  
  
}); 
  
  
  
  
 
  
  
  
  
const multerUpload = multer({ storage }); 
  
  
  
  
 
  
  
  
  
router.get("/", async (ctx) => { 
  
  
  
  
  ctx.body = "欢迎使用文件服务（by 阿宝哥）"; 
  
  
  
  
}); 
  
  
  
  
 
  
  
  
  
router.post( 
  
  
  
  
  "/upload/single", 
  
  
  
  
  async (ctx, next) => { 
  
  
  
  
    try { 
  
  
  
  
      await next(); 
  
  
  
  
      ctx.body = { 
  
  
  
  
        code: 1, 
  
  
  
  
        msg: "文件上传成功", 
  
  
  
  
        url: `${RESOURCE_URL}/${ctx.file.originalname}`, 
  
  
  
  
      }; 
  
  
  
  
    } catch (error) { 
  
  
  
  
      ctx.body = { 
  
  
  
  
        code: 0, 
  
  
  
  
        msg: "文件上传失败" 
  
  
  
  
      }; 
  
  
  
  
    } 
  
  
  
  
  }, 
  
  
  
  
  multerUpload.single("file") 
  
  
  
  
); 
  
  
  
  
 
  
  
  
  
// 注册中间件 
  
  
  
  
app.use(cors()); 
  
  
  
  
app.use(serve(UPLOAD_DIR)); 
  
  
  
  
app.use(router.routes()).use(router.allowedMethods()); 
  
  
  
  
 
  
  
  
  
app.listen(PORT, () => { 
  
  
  
  
  console.log(`app starting at port ${PORT}`); 
  
  
  
  
}); 
 
 
 
 

以上代码相对比较简单，我们就不展开介绍了。Koa 内核很简洁，扩展功能都是通过中间件来实现。比如示例中使用到的路由、CORS、静态资源处理等功能都是通过中间件实现。因此要想掌握 Koa 这个框架，核心是掌握它的中间件机制。如果你想深入了解的话，可以阅读 如何更好地理解中间件和洋葱模型 这篇文章。其实除了单文件上传外，在文件上传的场景中，我们也可以同时上传多个文件。

单文件上传示例：single-file-upload

https://github.com/semlinker/file-upload-demos/tree/master/single-file-upload

二、多文件上传

要上传多个文件，首先我们需要允许用户同时选择多个文件。要实现这个功能，我们可以利用 input 元素的 multiple 属性。跟前面介绍的 accept 属性一样，该属性也存在兼容性问题，具体如下图所示：

(图片来源 —— https://caniuse.com/mdn-api_htmlinputelement_multiple)

2.1 前端代码

html

相比单文件上传的代码，多文件上传场景下的 input 元素多了一个 multiple 属性：

 
 
 
 

  
  
  
  
 
  
  
  
  
上传文件 
 
 
 
 

js

在单文件上传的代码中，我们通过 uploadFileEle.files[0] 获取单个文件，而对于多文件上传来说，我们需要获取已选择的文件列表，即通过 uploadFileEle.files 来获取，它返回的是一个 FileList 对象。

 
 
 
 

  
  
  
  
async function uploadFile() { 
  
  
  
  
  if (!uploadFileEle.files.length) return; 
  
  
  
  
  const files = Array.from(uploadFileEle.files); 
  
  
  
  
  upload({ 
  
  
  
  
    url: "/multiple", 
  
  
  
  
    files, 
  
  
  
  
  }); 
  
  
  
  
} 
 
 
 
 

因为要支持上传多个文件，所以我们需要同步更新一下 upload 函数。对应的处理逻辑就是遍历文件列表，然后使用 FormData 对象的 append 方法来添加多个文件，具体代码如下所示：

 
 
 
 

  
  
  
  
function upload({ url, files, fieldName = "file" }) { 
  
  
  
  
  let formData = new FormData(); 
  
  
  
  
  files.forEach((file) => { 
  
  
  
  
    formData.append(fieldName, file); 
  
  
  
  
  }); 
  
  
  
  
  request.post(url, formData, { 
  
  
  
  
    // 监听上传进度 
  
  
  
  
    onUploadProgress: function (progressEvent) { 
  
  
  
  
      const percentCompleted = Math.round( 
  
  
  
  
        (progressEvent.loaded * 100) / progressEvent.total 
  
  
  
  
      ); 
  
  
  
  
      console.log(percentCompleted); 
  
  
  
  
    }, 
  
  
  
  
  }); 
  
  
  
  
} 
 
 
 
 

2.2 服务端代码

在以下代码中，我们定义了一个新的路由 —— /upload/multiple 来处理多文件上传的功能。当所有文件都成功上传后，就会返回一个已上传文件的 url 地址列表：

 
 
 
 

  
  
  
  
router.post( 
  
  
  
  
  "/upload/multiple", 
  
  
  
  
  async (ctx, next) => { 
  
  
  
  
    try { 
  
  
  
  
      await next(); 
  
  
  
  
      urls = ctx.files.file.map(file => `${RESOURCE_URL}/${file.originalname}`); 
  
  
  
  
      ctx.body = { 
  
  
  
  
        code: 1, 
  
  
  
  
        msg: "文件上传成功", 
  
  
  
  
        urls 
  
  
  
  
      }; 
  
  
  
  
    } catch (error) { 
  
  
  
  
      ctx.body = { 
  
  
  
  
        code: 0, 
  
  
  
  
        msg: "文件上传失败", 
  
  
  
  
      }; 
  
  
  
  
    } 
  
  
  
  
  }, 
  
  
  
  
  multerUpload.fields([ 
  
  
  
  
    { 
  
  
  
  
      name: "file", // 与FormData表单项的fieldName相对应 
  
  
  
  
    }, 
  
  
  
  
  ]) 
  
  
  
  
); 
 
 
 
 

介绍完单文件和多文件上传的功能，接下来我们来介绍目录上传的功能。

多文件上传示例：multiple-file-upload

https://github.com/semlinker/file-upload-demos/tree/master/multiple-file-upload

三、目录上传

可能你还不知道，input 元素上还有一个的 webkitdirectory 属性。当设置了 webkitdirectory 属性之后，我们就可以选择目录了。

当我们选择了指定目录之后，比如阿宝哥桌面上的 images 目录，就会显示以下确认框：

点击上传按钮之后，我们就可以获取文件列表。列表中的文件对象上含有一个 webkitRelativePath 属性，用于表示当前文件的相对路径。

虽然通过 webkitdirectory 属性可以很容易地实现选择目录的功能，但在实际项目中我们还需要考虑它的兼容性。比如在 IE 11 以下的版本就不支持该属性，其它浏览器的兼容性如下图所示：

(图片来源 —— https://caniuse.com/?search=webkitdirectory)

了解完 webkitdirectory 属性的兼容性，我们先来介绍前端的实现代码。

3.1 前端代码

为了让服务端能按照实际的目录结构来存放对应的文件，在添加表单项时我们需要把当前文件的路径提交到服务端。此外，为了确保@koa/multer 能正确处理文件的路径，我们需要对路径进行特殊处理。即把 / 斜杠替换为 @ 符号。对应的处理方式如下所示：

 
 
 
 

  
  
  
  
function upload({ url, files, fieldName = "file" }) { 
  
  
  
  
  let formData = new FormData(); 
  
  
  
  
  files.forEach((file, i) => { 
  
  
  
  
    formData.append( 
  
  
  
  
      fieldName,  
  
  
  
  
      files[i], 
  
  
  
  
      files[i].webkitRelativePath.replace(/\//g, "@"); 
  
  
  
  
    ); 
  
  
  
  
  }); 
  
  
  
  
  request.post(url, formData); // 省略上传进度处理 
  
  
  
  
} 
 
 
 
 

3.2 服务端代码

目录上传与多文件上传，服务端代码的主要区别就是 @koa/multer 中间件的配置对象不一样。在 destination 属性对应的函数中，我们需要把文件名中 @ 还原成 /，然后根据文件的实际路径来生成目录。

 
 
 
 

  
  
  
  
const fse = require("fs-extra"); 
  
  
  
  
const storage = multer.diskStorage({ 
  
  
  
  
  destination: async function (req, file, cb) { 
  
  
  
  
    // images@image-1.jpeg => images/image-1.jpeg 
  
  
  
  
    let relativePath = file.originalname.replace(/@/g, path.sep); 
  
  
  
  
    let index = relativePath.lastIndexOf(path.sep); 
  
  
  
  
    let fileDir = path.join(UPLOAD_DIR, relativePath.substr(0, index)); 
  
  
  
  
    // 确保文件目录存在，若不存在的话，会自动创建 
  
  
  
  
    await fse.ensureDir(fileDir);  
  
  
  
  
    cb(null, fileDir); 
  
  
  
  
  }, 
  
  
  
  
  filename: function (req, file, cb) { 
  
  
  
  
    let parts = file.originalname.split("@"); 
  
  
  
  
    cb(null, `${parts[parts.length - 1]}`);  
  
  
  
  
  }, 
  
  
  
  
}); 
 
 
 
 

现在我们已经实现了目录上传的功能，那么能否把目录下的文件压缩成一个压缩包后再上传呢?答案是可以的，接下来我们来介绍如何实现压缩目录上传的功能。

目录上传示例：directory-upload

https://github.com/semlinker/file-upload-demos/tree/master/directory-upload

四、压缩目录上传

在 JavaScript 如何在线解压 ZIP 文件? 这篇文章中，介绍了在浏览器端如何使用 JSZip 这个库实现在线解压 ZIP 文件的功能。JSZip 这个库除了可以解析 ZIP 文件之外，它还可以用来 创建和编辑 ZIP 文件。利用 JSZip 这个库提供的 API，我们就可以把目录下的所有文件压缩成 ZIP 文件，然后再把生成的 ZIP 文件上传到服务器。

4.1 前端代码

JSZip 实例上的 file(name, data [,options]) 方法，可以把文件添加到 ZIP 文件中。基于该方法我们可以封装了一个 generateZipFile 函数，用于把目录下的文件列表压缩成一个 ZIP 文件。以下是 generateZipFile 函数的具体实现：

 
 
 
 

  
  
  
  
function generateZipFile( 
  
  
  
  
  zipName, files, 
  
  
  
  
  options = { type: "blob", compression: "DEFLATE" } 
  
  
  
  
) { 
  
  
  
  
  return new Promise((resolve, reject) => { 
  
  
  
  
    const zip = new JSZip(); 
  
  
  
  
    for (let i = 0; i < files.length; i++) { 
  
  
  
  
      zip.file(files[i].webkitRelativePath, files[i]); 
  
  
  
  
    } 
  
  
  
  
    zip.generateAsync(options).then(function (blob) { 
  
  
  
  
      zipName = zipName || Date.now() + ".zip"; 
  
  
  
  
      const zipFile = new File([blob], zipName, { 
  
  
  
  
        type: "application/zip", 
  
  
  
  
      }); 
  
  
  
  
      resolve(zipFile); 
  
  
  
  
    }); 
  
  
  
  
  }); 
  
  
  
  
} 
 
 
 
 

在创建完 generateZipFile 函数之后，我们需要更新一下前面已经介绍过的 uploadFile 函数：

 
 
 
 

  
  
  
  
async function uploadFile() { 
  
  
  
  
  let fileList = uploadFileEle.files; 
  
  
  
  
  if (!fileList.length) return; 
  
  
  
  
  let webkitRelativePath = fileList[0].webkitRelativePath; 
  
  
  
  
  let zipFileName = webkitRelativePath.split("/")[0] + ".zip"; 
  
  
  
  
  let zipFile = await generateZipFile(zipFileName, fileList); 
  
  
  
  
  upload({ 
  
  
  
  
    url: "/single", 
  
  
  
  
    file: zipFile, 
  
  
  
  
    fileName: zipFileName 
  
  
  
  
  }); 
  
  
  
  
} 
 
 
 
 

在以上的 uploadFile 函数中，我们会对返回的 FileList 对象进行处理，即调用 generateZipFile 函数来生成 ZIP 文件。此外，为了在服务端接收压缩文件时，能获取到文件名，我们为 upload 函数增加了一个 fileName 参数，该参数用于调用 formData.append 方法时，设置上传文件的文件名：

 
 
 
 

  
  
  
  
function upload({ url, file, fileName, fieldName = "file" }) { 
  
  
  
  
  if (!url || !file) return; 
  
  
  
  
  let formData = new FormData(); 
  
  
  
  
  formData.append( 
  
  
  
  
    fieldName, file, fileName 
  
  
  
  
  ); 
  
  
  
  
  request.post(url, formData); // 省略上传进度跟踪 
  
  
  
  
} 
 
 
 
 

以上就是压缩目录上传，前端部分的 JS 代码，服务端的代码可以参考前面单文件上传的相关代码。

压缩目录上传示例：directory-compress-upload

https://github.com/semlinker/file-upload-demos/tree/master/directory-compress-upload

五、拖拽上传

要实现拖拽上传的功能，我们需要先了解与拖拽相关的事件。比如 drag、dragend、dragenter、dragover 或 drop 事件等。这里我们只介绍接下来要用到的拖拽事件：

• dragenter：当拖拽元素或选中的文本到一个可释放目标时触发;
• dragover：当元素或选中的文本被拖到一个可释放目标上时触发(每100毫秒触发一次);
• dragleave：当拖拽元素或选中的文本离开一个可释放目标时触发;
• drop：当元素或选中的文本在可释放目标上被释放时触发。

基于上面的这些事件，我们就可以提高用户拖拽的体验。比如当用户拖拽的元素进入目标区域时，对目标区域进行高亮显示。当用户拖拽的元素离开目标区域时，移除高亮显示。很明显当 drop 事件触发后，拖拽的元素已经放入目标区域了，这时我们就需要获取对应的数据。

那么如何获取拖拽对应的数据呢?这时我们需要使用 DataTransfer 对象，该对象用于保存拖动并放下过程中的数据。它可以保存一项或多项数据，这些数据项可以是一种或者多种数据类型。若拖动操作涉及拖动文件，则我们可以通过 DataTransfer 对象的 files 属性来获取文件列表。

介绍完拖拽上传相关的知识后，我们来看一下具体如何实现拖拽上传的功能。

5.1 前端代码

html

  
 
 
 

   
  
  
  
 
   
  
  
  
   
拖拽上传文件