[[410449]]

本文轉(zhuǎn)載自微信公眾號「全棧修仙之路」，作者阿寶哥 。轉(zhuǎn)載本文請聯(lián)系全棧修仙之路公眾號。

在日常工作中，文件上傳是一個很常見的功能。在項目開發(fā)過程中，我們通常都會使用一些成熟的上傳組件來實現(xiàn)對應(yīng)的功能。一般來說，成熟的上傳組件不僅會提供漂亮 UI 或好的交互體驗，而且還會提供多種不同的上傳方式，以滿足不同的場景需求。

一般在我們工作中，主要會涉及到 8 種文件上傳的場景，每一種場景背后都使用不同的技術(shù)，其中也有很多細節(jié)需要我們額外注意。今天阿寶哥就來帶大家總結(jié)一下這 8 種場景，讓大家能更好地理解成熟上傳組件所提供的功能。閱讀本文后，你將會了解以下的內(nèi)容：

• 單文件上傳：利用 input 元素的 accept 屬性限制上傳文件的類型、利用 JS 檢測文件的類型及使用 Koa 實現(xiàn)單文件上傳的功能;
• 多文件上傳：利用 input 元素的 multiple 屬性支持選擇多文件及使用 Koa 實現(xiàn)多文件上傳的功能;
• 目錄上傳：利用 input 元素上的 webkitdirectory 屬性支持目錄上傳的功能及使用 Koa 實現(xiàn)目錄上傳并按文件目錄結(jié)構(gòu)存放的功能;
• 壓縮目錄上傳：在目錄上傳的基礎(chǔ)上，利用 JSZip 實現(xiàn)壓縮目錄上傳的功能;
• 拖拽上傳：利用拖拽事件和 DataTransfer 對象實現(xiàn)拖拽上傳的功能;
• 剪貼板上傳：利用剪貼板事件和 Clipboard API 實現(xiàn)剪貼板上傳的功能;
• 大文件分塊上傳：利用 Blob.slice、SparkMD5 和第三方庫 async-pool 實現(xiàn)大文件并發(fā)上傳的功能;
• 服務(wù)端上傳：利用第三方庫 form-data 實現(xiàn)服務(wù)端文件流式上傳的功能。

一、單文件上傳

對于單文件上傳的場景來說，最常見的是圖片上傳的場景，所以我們就以圖片上傳為例，先來介紹單文件上傳的基本流程。

1.1 前端代碼

html

在以下代碼中，我們通過 input 元素的 accept 屬性限制了上傳文件的類型。這里使用 image/* 限制只能選擇圖片文件，當(dāng)然你也可以設(shè)置特定的類型，比如 image/png 或 image/png,image/jpeg。

<input id="uploadFile" type="file" accept="image/*" /> 
<button id="submit" onclick="uploadFile()">上傳文件</button> 

需要注意的是，雖然我們把 input 元素的 accept 屬性設(shè)置為 image/png。但如果用戶把 jpg/jpeg 格式的圖片后綴名改為 .png，就可以成功繞過這個限制。要解決這個問題，我們可以通過讀取文件中的二進制數(shù)據(jù)來識別正確的文件類型。

要查看圖片對應(yīng)的二進制數(shù)據(jù)，我們可以借助一些現(xiàn)成的編輯器，比如 Windows 平臺下的 WinHex 或 macOS 平臺下的 Synalyze It! Pro 十六進制編輯器。這里我們使用 Synalyze It! Pro 這個編輯器，來查看阿寶哥頭像對應(yīng)的二進制數(shù)據(jù)。

那么在前端能否不借助工具，讀取文件的二進制數(shù)據(jù)呢?答案是可以的，這里阿寶哥就不展開介紹了。感興趣的話，你可以閱讀 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, { 
    // 監(jiān)聽上傳進度 
    onUploadProgress: function (progressEvent) { 
      const percentCompleted = Math.round( 
        (progressEvent.loaded * 100) / progressEvent.total 
      ); 
      console.log(percentCompleted); 
     }, 
  }); 
} 

在以上代碼中，我們先把讀取的 File 對象封裝成 FormData 對象，然后利用 Axios 實例的 post 方法實現(xiàn)文件上傳的功能。在上傳前，通過設(shè)置請求配置對象的 onUploadProgress 屬性，就可以獲取文件的上傳進度。

1.2 服務(wù)端代碼

Koa 是一個簡單易用的 Web 框架，它的特點是優(yōu)雅、簡潔、輕量、自由度高。所以我們選擇它來搭建文件服務(wù)，并使用以下中間件來實現(xiàn)相應(yīng)的功能：

• koa-static：處理靜態(tài)資源的中間件;
• @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) { 
    // 設(shè)置文件的存儲目錄 
    cb(null, UPLOAD_DIR); 
  }, 
  filename: function (req, file, cb) { 
    // 設(shè)置文件名 
    cb(null, `${file.originalname}`); 
  }, 
}); 
 
const multerUpload = multer({ storage }); 
 
router.get("/", async (ctx) => { 
  ctx.body = "歡迎使用文件服務(wù)（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 內(nèi)核很簡潔，擴展功能都是通過中間件來實現(xiàn)。比如示例中使用到的路由、CORS、靜態(tài)資源處理等功能都是通過中間件實現(xiàn)。因此要想掌握 Koa 這個框架，核心是掌握它的中間件機制。如果你想深入了解的話，可以閱讀 如何更好地理解中間件和洋蔥模型 這篇文章。其實除了單文件上傳外，在文件上傳的場景中，我們也可以同時上傳多個文件。

單文件上傳示例：single-file-upload

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

二、多文件上傳

要上傳多個文件，首先我們需要允許用戶同時選擇多個文件。要實現(xiàn)這個功能，我們可以利用 input 元素的 multiple 屬性。跟前面介紹的 accept 屬性一樣，該屬性也存在兼容性問題，具體如下圖所示：

(圖片來源 —— https://caniuse.com/mdn-api_htmlinputelement_multiple)

2.1 前端代碼

html

相比單文件上傳的代碼，多文件上傳場景下的 input 元素多了一個 multiple 屬性：

<input id="uploadFile" type="file" accept="image/*" multiple /> 
<button id="submit" onclick="uploadFile()">上傳文件</button> 

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 函數(shù)。對應(yīng)的處理邏輯就是遍歷文件列表，然后使用 FormData 對象的 append 方法來添加多個文件，具體代碼如下所示：

function upload({ url, files, fieldName = "file" }) { 
  let formData = new FormData(); 
  files.forEach((file) => { 
    formData.append(fieldName, file); 
  }); 
  request.post(url, formData, { 
    // 監(jiān)聽上傳進度 
    onUploadProgress: function (progressEvent) { 
      const percentCompleted = Math.round( 
        (progressEvent.loaded * 100) / progressEvent.total 
      ); 
      console.log(percentCompleted); 
    }, 
  }); 
} 

2.2 服務(wù)端代碼

在以下代碼中，我們定義了一個新的路由 —— /upload/multiple 來處理多文件上傳的功能。當(dāng)所有文件都成功上傳后，就會返回一個已上傳文件的 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相對應(yīng) 
    }, 
  ]) 
); 

介紹完單文件和多文件上傳的功能，接下來我們來介紹目錄上傳的功能。

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

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

三、目錄上傳

可能你還不知道，input 元素上還有一個的 webkitdirectory 屬性。當(dāng)設(shè)置了 webkitdirectory 屬性之后，我們就可以選擇目錄了。

<input id="uploadFile" type="file" accept="image/*" webkitdirectory /> 

當(dāng)我們選擇了指定目錄之后，比如阿寶哥桌面上的 images 目錄，就會顯示以下確認框：

點擊上傳按鈕之后，我們就可以獲取文件列表。列表中的文件對象上含有一個 webkitRelativePath 屬性，用于表示當(dāng)前文件的相對路徑。

雖然通過 webkitdirectory 屬性可以很容易地實現(xiàn)選擇目錄的功能，但在實際項目中我們還需要考慮它的兼容性。比如在 IE 11 以下的版本就不支持該屬性，其它瀏覽器的兼容性如下圖所示：

(圖片來源 —— https://caniuse.com/?search=webkitdirectory)

了解完 webkitdirectory 屬性的兼容性，我們先來介紹前端的實現(xiàn)代碼。

3.1 前端代碼

為了讓服務(wù)端能按照實際的目錄結(jié)構(gòu)來存放對應(yīng)的文件，在添加表單項時我們需要把當(dāng)前文件的路徑提交到服務(wù)端。此外，為了確保@koa/multer 能正確處理文件的路徑，我們需要對路徑進行特殊處理。即把 / 斜杠替換為 @ 符號。對應(yīng)的處理方式如下所示：

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 服務(wù)端代碼

目錄上傳與多文件上傳，服務(wù)端代碼的主要區(qū)別就是 @koa/multer 中間件的配置對象不一樣。在 destination 屬性對應(yīng)的函數(shù)中，我們需要把文件名中 @ 還原成 /，然后根據(jù)文件的實際路徑來生成目錄。

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)); 
    // 確保文件目錄存在，若不存在的話，會自動創(chuàng)建 
    await fse.ensureDir(fileDir);  
    cb(null, fileDir); 
  }, 
  filename: function (req, file, cb) { 
    let parts = file.originalname.split("@"); 
    cb(null, `${parts[parts.length - 1]}`);  
  }, 
}); 

現(xiàn)在我們已經(jīng)實現(xiàn)了目錄上傳的功能，那么能否把目錄下的文件壓縮成一個壓縮包后再上傳呢?答案是可以的，接下來我們來介紹如何實現(xiàn)壓縮目錄上傳的功能。

目錄上傳示例：directory-upload

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

四、壓縮目錄上傳

在 JavaScript 如何在線解壓 ZIP 文件? 這篇文章中，介紹了在瀏覽器端如何使用 JSZip 這個庫實現(xiàn)在線解壓 ZIP 文件的功能。JSZip 這個庫除了可以解析 ZIP 文件之外，它還可以用來 創(chuàng)建和編輯 ZIP 文件。利用 JSZip 這個庫提供的 API，我們就可以把目錄下的所有文件壓縮成 ZIP 文件，然后再把生成的 ZIP 文件上傳到服務(wù)器。

4.1 前端代碼

JSZip 實例上的 file(name, data [,options]) 方法，可以把文件添加到 ZIP 文件中?；谠摲椒ㄎ覀兛梢苑庋b了一個 generateZipFile 函數(shù)，用于把目錄下的文件列表壓縮成一個 ZIP 文件。以下是 generateZipFile 函數(shù)的具體實現(xiàn)：

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

在創(chuàng)建完 generateZipFile 函數(shù)之后，我們需要更新一下前面已經(jīng)介紹過的 uploadFile 函數(shù)：

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 函數(shù)中，我們會對返回的 FileList 對象進行處理，即調(diào)用 generateZipFile 函數(shù)來生成 ZIP 文件。此外，為了在服務(wù)端接收壓縮文件時，能獲取到文件名，我們?yōu)?upload 函數(shù)增加了一個 fileName 參數(shù)，該參數(shù)用于調(diào)用 formData.append 方法時，設(shè)置上傳文件的文件名：

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 代碼，服務(wù)端的代碼可以參考前面單文件上傳的相關(guān)代碼。

壓縮目錄上傳示例：directory-compress-upload

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

五、拖拽上傳

要實現(xiàn)拖拽上傳的功能，我們需要先了解與拖拽相關(guān)的事件。比如 drag、dragend、dragenter、dragover 或 drop 事件等。這里我們只介紹接下來要用到的拖拽事件：

• dragenter：當(dāng)拖拽元素或選中的文本到一個可釋放目標(biāo)時觸發(fā);
• dragover：當(dāng)元素或選中的文本被拖到一個可釋放目標(biāo)上時觸發(fā)(每100毫秒觸發(fā)一次);
• dragleave：當(dāng)拖拽元素或選中的文本離開一個可釋放目標(biāo)時觸發(fā);
• drop：當(dāng)元素或選中的文本在可釋放目標(biāo)上被釋放時觸發(fā)。

基于上面的這些事件，我們就可以提高用戶拖拽的體驗。比如當(dāng)用戶拖拽的元素進入目標(biāo)區(qū)域時，對目標(biāo)區(qū)域進行高亮顯示。當(dāng)用戶拖拽的元素離開目標(biāo)區(qū)域時，移除高亮顯示。很明顯當(dāng) drop 事件觸發(fā)后，拖拽的元素已經(jīng)放入目標(biāo)區(qū)域了，這時我們就需要獲取對應(yīng)的數(shù)據(jù)。

那么如何獲取拖拽對應(yīng)的數(shù)據(jù)呢?這時我們需要使用 DataTransfer 對象，該對象用于保存拖動并放下過程中的數(shù)據(jù)。它可以保存一項或多項數(shù)據(jù)，這些數(shù)據(jù)項可以是一種或者多種數(shù)據(jù)類型。若拖動操作涉及拖動文件，則我們可以通過 DataTransfer 對象的 files 屬性來獲取文件列表。

介紹完拖拽上傳相關(guān)的知識后，我們來看一下具體如何實現(xiàn)拖拽上傳的功能。

5.1 前端代碼

html

<div id="dropArea"> 
   <p>拖拽上傳文件</p> 
   <div id="imagePreview"></div> 
</div> 

css

#dropArea { 
  width: 300px; 
  height: 300px; 
  border: 1px dashed gray; 
  margin-bottom: 20px; 
} 
#dropArea p { 
  text-align: center; 
  color: #999; 
} 
#dropArea.highlighted { 
  background-color: #ddd; 
} 
#imagePreview { 
  max-height: 250px; 
  overflow-y: scroll; 
} 
#imagePreview img { 
  width: 100%; 
  display: block; 
  margin: auto; 
} 

js

為了讓大家能夠更好地閱讀拖拽上傳的相關(guān)代碼，我們把代碼拆成 4 部分來講解：

1、阻止默認拖拽行為

const dropAreaEle = document.querySelector("#dropArea"); 
const imgPreviewEle = document.querySelector("#imagePreview"); 
const IMAGE_MIME_REGEX = /^image\/(jpe?g|gif|png)$/i; 
 
["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => { 
   dropAreaEle.addEventListener(eventName, preventDefaults, false); 
   document.body.addEventListener(eventName, preventDefaults, false); 
}); 
 
function preventDefaults(e) { 
  e.preventDefault(); 
  e.stopPropagation(); 
} 

2、切換目標(biāo)區(qū)域的高亮狀態(tài)

["dragenter", "dragover"].forEach((eventName) => { 
    dropAreaEle.addEventListener(eventName, highlight, false); 
}); 
["dragleave", "drop"].forEach((eventName) => { 
    dropAreaEle.addEventListener(eventName, unhighlight, false); 
}); 
 
// 添加高亮樣式 
function highlight(e) { 
  dropAreaEle.classList.add("highlighted"); 
} 
 
// 移除高亮樣式 
function unhighlight(e) { 
  dropAreaEle.classList.remove("highlighted"); 
} 

3、處理圖片預(yù)覽

dropAreaEle.addEventListener("drop", handleDrop, false); 
 
function handleDrop(e) { 
  const dt = e.dataTransfer; 
  const files = [...dt.files]; 
  files.forEach((file) => { 
    previewImage(file, imgPreviewEle); 
  }); 
  // 省略文件上傳代碼 
} 
 
function previewImage(file, container) { 
  if (IMAGE_MIME_REGEX.test(file.type)) { 
    const reader = new FileReader(); 
    reader.onload = function (e) { 
      let img = document.createElement("img"); 
      img.src = e.target.result; 
      container.append(img); 
    }; 
    reader.readAsDataURL(file); 
  } 
} 

4、文件上傳

function handleDrop(e) { 
  const dt = e.dataTransfer; 
  const files = [...dt.files]; 
  // 省略圖片預(yù)覽代碼 
  files.forEach((file) => { 
    upload({ 
      url: "/single", 
      file, 
    }); 
  }); 
} 
 
const request = axios.create({ 
  baseURL: "http://localhost:3000/upload", 
  timeout: 60000, 
}); 
 
function upload({ url, file, fieldName = "file" }) { 
  let formData = new FormData(); 
  formData.set(fieldName, file); 
  request.post(url, formData, { 
    // 監(jiān)聽上傳進度 
    onUploadProgress: function (progressEvent) { 
      const percentCompleted = Math.round( 
        (progressEvent.loaded * 100) / progressEvent.total 
      ); 
      console.log(percentCompleted); 
    }, 
  }); 
} 

拖拽上傳算是一個比較常見的場景，很多成熟的上傳組件都支持該功能。其實除了拖拽上傳外，還可以利用剪貼板實現(xiàn)復(fù)制上傳的功能。

拖拽上傳示例：drag-drop-upload

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

六、剪貼板上傳

在介紹如何實現(xiàn)剪貼板上傳的功能前，我們需要了解一下 Clipboard API。Clipboard 接口實現(xiàn)了 Clipboard API，如果用戶授予了相應(yīng)的權(quán)限，就能提供系統(tǒng)剪貼板的讀寫訪問。在 Web 應(yīng)用程序中，Clipboard API 可用于實現(xiàn)剪切、復(fù)制和粘貼功能。該 API 用于取代通過 document.execCommand API 來實現(xiàn)剪貼板的操作。

在實際項目中，我們不需要手動創(chuàng)建 Clipboard 對象，而是通過 navigator.clipboard 來獲取 Clipboard 對象：

在獲取 Clipboard 對象之后，我們就可以利用該對象提供的 API 來訪問剪貼板，比如：

navigator.clipboard.readText().then( 
  clipText => document.querySelector(".editor").innerText = clipText 
); 

以上代碼將 HTML 中含有 .editor 類的第一個元素的內(nèi)容替換為剪貼板的內(nèi)容。如果剪貼板為空，或者不包含任何文本，則元素的內(nèi)容將被清空。這是因為在剪貼板為空或者不包含文本時，readText 方法會返回一個空字符串。

利用 Clipboard API 我們可以很方便地操作剪貼板，但實際項目使用過程中也得考慮它的兼容性：

(圖片來源 —— https://caniuse.com/async-clipboard)

要實現(xiàn)剪貼板上傳的功能，可以分為以下 3 個步驟：

• 監(jiān)聽容器的粘貼事件;
• 讀取并解析剪貼板中的內(nèi)容;
• 動態(tài)構(gòu)建 FormData 對象并上傳。

了解完上述步驟，接下來我們來分析一下具體實現(xiàn)的代碼。

6.1 前端代碼

html

<div id="uploadArea"> 
   <p>請先復(fù)制圖片后再執(zhí)行粘貼操作</p> 
</div> 

css

#uploadArea { 
   width: 400px; 
   height: 400px; 
   border: 1px dashed gray; 
   display: table-cell; 
   vertical-align: middle; 
} 
#uploadArea p { 
   text-align: center; 
   color: #999; 
} 
#uploadArea img { 
   max-width: 100%; 
   max-height: 100%; 
   display: block; 
   margin: auto; 
} 

js

在以下代碼中，我們使用 addEventListener 方法為 uploadArea 容器添加 paste 事件。在對應(yīng)的事件處理函數(shù)中，我們會優(yōu)先判斷當(dāng)前瀏覽器是否支持異步 Clipboard API。如果支持的話，就會通過 navigator.clipboard.read 方法來讀取剪貼板中的內(nèi)容。在讀取內(nèi)容之后，我們會通過正則判斷剪貼板項中是否包含圖片資源，如果有的話會調(diào)用 previewImage 方法執(zhí)行圖片預(yù)覽操作并把返回的 blob 對象保存起來，用于后續(xù)的上傳操作。

const IMAGE_MIME_REGEX = /^image\/(jpe?g|gif|png)$/i; 
const uploadAreaEle = document.querySelector("#uploadArea"); 
 
uploadAreaEle.addEventListener("paste", async (e) => { 
  e.preventDefault(); 
  const files = []; 
  if (navigator.clipboard) { 
    let clipboardItems = await navigator.clipboard.read(); 
    for (const clipboardItem of clipboardItems) { 
      for (const type of clipboardItem.types) { 
        if (IMAGE_MIME_REGEX.test(type)) { 
           const blob = await clipboardItem.getType(type); 
           insertImage(blob, uploadAreaEle); 
           files.push(blob); 
         } 
       } 
     } 
  } else { 
      const items = e.clipboardData.items; 
      for (let i = 0; i < items.length; i++) { 
        if (IMAGE_MIME_REGEX.test(items[i].type)) { 
          let file = items[i].getAsFile(); 
          insertImage(file, uploadAreaEle); 
          files.push(file); 
        } 
      } 
  } 
  if (files.length > 0) { 
    confirm("剪貼板檢測到圖片文件，是否執(zhí)行上傳操作？")  
      && upload({ 
           url: "/multiple", 
           files, 
      }); 
   } 
}); 

若當(dāng)前瀏覽器不支持異步 Clipboard API，則我們會嘗試通過 e.clipboardData.items 來訪問剪貼板中的內(nèi)容。需要注意的是，在遍歷剪貼板內(nèi)容項的時候，我們是通過 getAsFile 方法來獲取剪貼板的內(nèi)容。當(dāng)然該方法也存在兼容性問題，具體如下圖所示：

(圖片來源 —— https://caniuse.com/mdn-api_datatransferitem_getasfile)

前面已經(jīng)提到，當(dāng)從剪貼板解析到圖片資源時，會讓用戶進行預(yù)覽，該功能是基于 FileReader API 來實現(xiàn)的，對應(yīng)的代碼如下所示：

function previewImage(file, container) { 
  const reader = new FileReader(); 
  reader.onload = function (e) { 
    let img = document.createElement("img"); 
    img.src = e.target.result; 
    container.append(img); 
  }; 
  reader.readAsDataURL(file); 
} 

當(dāng)用戶預(yù)覽完成后，如果確認上傳我們就會執(zhí)行文件的上傳操作。因為文件是從剪貼板中讀取的，所以在上傳前我們會根據(jù)文件的類型，自動為它生成一個文件名，具體是采用時間戳加文件后綴的形式：

function upload({ url, files, fieldName = "file" }) { 
  let formData = new FormData(); 
  files.forEach((file) => { 
    let fileName = +new Date() + "." + IMAGE_MIME_REGEX.exec(file.type)[1]; 
    formData.append(fieldName, file, fileName); 
  }); 
  request.post(url, formData); 
} 

前面我們已經(jīng)介紹了文件上傳的多種不同場景，接下來我們來介紹一個 “特殊” 的場景 —— 大文件上傳。

剪貼板上傳示例：clipboard-upload

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

七、大文件分塊上傳

相信你可能已經(jīng)了解大文件上傳的解決方案，在上傳大文件時，為了提高上傳的效率，我們一般會使用 Blob.slice 方法對大文件按照指定的大小進行切割，然后通過多線程進行分塊上傳，等所有分塊都成功上傳后，再通知服務(wù)端進行分塊合并。具體處理方案如下圖所示：

因為在 JavaScript 中如何實現(xiàn)大文件并發(fā)上傳? 這篇文章中，阿寶哥已經(jīng)詳細介紹了大文件并發(fā)上傳的方案，所以這里就不展開介紹了。我們只回顧一下大文件并發(fā)上傳的完整流程：

前面我們都是介紹客戶端文件上傳的場景，其實也有服務(wù)端文件上傳的場景。比如在服務(wù)端動態(tài)生成海報后，上傳到另外一臺服務(wù)器或云廠商的 OSS(Object Storage Service)。下面我們就以 Node.js 為例來介紹在服務(wù)端如何上傳文件。

大文件分塊上傳示例：big-file-upload

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

八、服務(wù)端上傳

服務(wù)器上傳就是把文件從一臺服務(wù)器上傳到另外一臺服務(wù)器。借助 Github 上 form-data 這個庫提供的功能，我們可以很容易地實現(xiàn)服務(wù)器上傳的功能。下面我們來簡單介紹一下單文件和多文件上傳的功能：

8.1 單文件上傳

const fs = require("fs"); 
const path = require("path"); 
const FormData = require("form-data"); 
 
const form1 = new FormData(); 
form1.append("file", fs.createReadStream(path.join(__dirname, "images/image-1.jpeg"))); 
form1.submit("http://localhost:3000/upload/single", (error, response) => { 
  if(error) { 
    console.log("單圖上傳失敗"); 
    return; 
  } 
  console.log("單圖上傳成功"); 
}); 

8.2 多文件上傳

const form2 = new FormData(); 
form2.append("file", fs.createReadStream(path.join(__dirname, "images/image-2.jpeg"))); 
form2.append("file", fs.createReadStream(path.join(__dirname, "images/image-3.jpeg"))); 
form2.submit("http://localhost:3000/upload/multiple", (error, response) => { 
  if(error) { 
    console.log("多圖上傳失敗"); 
    return; 
  } 
  console.log("多圖上傳成功"); 
}); 

觀察以上代碼可知，創(chuàng)建完 FormData 對象之后，我們只需要通過 fs.createReadStream API 創(chuàng)建可讀流，然后調(diào)用 FormData 對象的 append 方法添加表單項，最后再調(diào)用 submit 方法執(zhí)行提交操作即可。

其實除了 ReadableStream 之外，F(xiàn)ormData 對象的 append 方法還支持以下類型：

const FormData = require('form-data'); 
const http = require('http'); 
 
const form = new FormData(); 
http.request('http://nodejs.org/images/logo.png', function(response) { 
  form.append('my_field', 'my value'); 
  form.append('my_buffer', new Buffer(10)); 
  form.append('my_logo', response); 
}); 

服務(wù)端文件上傳的內(nèi)容就介紹到這里，關(guān)于 form-data 這個庫的其他用法，感興趣的話，可以閱讀對應(yīng)的使用文檔。其實除了以上介紹的八種場景外，在日常工作中，你也可能會使用一些同步工具，比如 Syncthing 文件同步工具實現(xiàn)文件傳輸。好的，本文的所有內(nèi)容都已經(jīng)介紹完了，最后我們來做一個總結(jié)。

服務(wù)端上傳示例：server-upload

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

九、總結(jié)

本文阿寶哥詳細介紹了文件上傳的八種場景，希望閱讀完本文后，你對八種場景背后使用的技術(shù)有一定的了解。由于篇幅有限，阿寶哥就沒有展開介紹與 multipart/form-data 類型相關(guān)的內(nèi)容，感興趣的小伙伴可以自行了解一下。

此外，在實際項目中，你可以考慮直接使用成熟的第三方組件，比如 Github 上的 Star 數(shù) 11K+ 的 filepond。該組件采用插件化的架構(gòu)，以插件的方式，提供了非常多的功能，比如 File encode、File rename、File poster、Image preview 和 Image crop 等?？傊?，它是一個很不錯的組件，以后有機會的話，大家可以嘗試一下。

十、參考資源

MDN- Clipboard

MDN - DataTransfer

JSZip- API

JavaScript 如何檢測文件的類型?

JavaScript 中如何實現(xiàn)大文件并發(fā)上傳?