來源| OSCHINA 社區

作者 | 京東云開發者-京東物流 劉海鼎

背景

前端文件上傳本來是一個常規交互操作，沒什么特殊性可言，但是最近在做文件上傳，需要實現截圖粘貼上傳，去找了下有沒有什么好用的組件，網上提供的方法有，但是沒找完整的組件來支持 cv 上傳，經過了解發現可以用剪貼板功能讓自己的 cv 實現文件上傳，于是自己就整合了目前幾種文件上傳的交互方式，碼了一個支持 cv 的 vue3 文件上傳組件（造個輪子）。

介紹

作為一個完整的組件內容還是挺多的，這里主要介紹下上傳交互中一些主要功能，包括上傳的幾種交互方式， 上傳進度的獲取，上傳類型的限制，默認上傳請求和自定義上傳請求。 以下代碼都是非完整代碼，大家用于參考實現過程，可以通過以下代碼修改來完成自己想要的交互功能。

幾種交互

1，點擊選擇上傳

點擊選擇是最常見的上傳交互，之前原生上傳控件，樣式修改比較麻煩，為了修改上傳樣式，我們可以把該控件設置隱藏，用其他元素通過從 click 交互，來觸發該文件選擇控件。在選擇文件控件上綁定 onchange 事件，該控件在 change 后獲取到文件，然后調用上傳方法，實現如下：

2，拖動上傳

拖拽文件上傳，首先在頁面上建立一個拖放區域，在拖放區域上綁定拖放事件，監聽拖放事件 drop 內容中 datTransfer 中是包含 files, 如果存在 files，獲取 files 然后調用上傳附件方法。 拖放區域可以通過事件 dragover 來檢查拖放文件是否進入拖放區域來設置拖放區域懸浮樣式，通過 dragleave 來檢查離開拖放區取消懸浮樣式。 進行交互提示 實現如下：

     

         +
     
  

3，復制上傳（復制檢測區域設置）

復制上傳的交互步驟

?將文件保存到剪貼板：執行鍵盤快捷鍵或者使用鼠標復制

?將鼠標移動到可粘貼區： 判斷是否移動到可粘貼區，來確定是否在執行粘貼后上傳，否則整個頁面都會作為粘貼區

?執行粘貼操作：執行鍵盤粘貼快捷鍵（ctrl+v） 粘貼區綁定 paste 事件，在觸發 paste 事件前將鼠標移到粘貼區，復制會被檢查不在粘貼區，阻止上傳操作，實現如下：

上傳模式

根據以上三種交互，大家可自由組合上傳形式，比如點擊和拖拽，拖拽和粘貼組合等等，我這邊目前按點擊，拖拽，粘貼疊加組合，設置為：

?點擊上傳，click

?拖拽上傳 drag（包括點擊上傳和拖拽上傳）

?粘貼上傳 paste （包括點擊，拖拽和復制上傳）

通過傳參 uploadeMode 設置 （click, drag, paste）

組件設置：

組件應用

    
點擊上傳

文件限制

文件限制包括是否多文件上傳限制 multiple， 上傳數量 limit 限制，上傳類型 accept 限制，這些設置參考了 element-plus 上傳組件，在其基礎上做了簡化。實現如下 multiple 和 accept 首先需要在點擊控件上綁定，以便于在點擊選擇上傳時就能夠過濾對應文件，拖拽上傳和粘貼上傳，無法通過 input [type=file] 組件控制需要在上傳方法中判斷過濾，(以粘貼上傳為例) 組件實現

上傳進度設置

獲取文件上傳進度，使用 ajax 中的 progress 事件監聽機制，回傳數據 loaded 進度，和 ttotal 進行計算，獲取到計算的百分比通過 process 插槽線上在界面上。 具體實現如下: 組件實現 文件限制后執行組件上傳，默認情況下走內置的上傳方法，如果做了自定義，上傳進度也需要自己實現（自己實現過程可以參考內置方法中的實現）

// 上傳方法調用
ajaxUpload({...props, file})
// 上傳方法實現
ajaxUpload = (options) => {
const xhr = new XMLHttpRequest()
    const action = option.action
    console.log(xhr, xhr.upload)
    if (xhr.upload) {
    // 建立progress監聽
      xhr.upload.addEventListener('progress', (evt:any) => {
        const progressEvt = evt
        progressEvt.percent = evt.total > 0 ? (evt.loaded / evt.total) * 100 : 0
        // 回傳進度數據
        option.onProgress(progressEvt)
      })
    }
}

同樣文件上傳成功，異常等方法也可以通過監聽 load 并且判斷 xhr.status 來實現，

xhr.addEventListener('load', () => {
      if (xhr.status < 200 || xhr.status >= 300) {
        return option.onError(getError(action, option, xhr))
      }
      option.onSuccess(getBody(xhr))
})

組件使用 ?配置獲取進度數據回調函數 onProgress ?配置接收回傳的進度數據進行賦值 ?配置進度條插槽顯示進度數據

   
點擊上傳
   

自定義上傳請求

默認情況下，不需要自定義上傳請求，組件內置了上傳請求，如果個人有需求可以自定義上傳請求，子定義上傳請求，是在文件限制流程后，檢查是否有自定義請求方法，如果存在就將文件傳入自定義請求方法。 組件實現：

// 上傳文件
const uploadFiles = (files) => {
    if (files.length === 0) return
    const { limit, multiple, accept, httpRequest } = props
    // 是否多文件限制，主要用于拖拽和粘貼上傳中
    if (!multiple) {
       files = Array.from(files).slice(0, 1)
    }
    // 文件數量
    if (limit && files.length > limit) {
       /*具體大家需要的邏輯可自行定義*/
       return
    }
    // 文件類型限制
    if (accept) {
       files = filesFiltered(Array.from(files), accept)
    }
    //在文件符合條件后執行上傳方法
    // 自定義上傳方法調用
    if(httpRequest) {
       return httpRequest(files)
    }
 }

組件應用： 注意點： 通過自定義上傳方法實現時，在原來組件上的屬性 action 無效

    
點擊上傳
    
 

總結

通過以上可以實現一個支持多種交互方式的文件上傳組件，同時也將 element-plus 中文件上傳的流程做了一個學習，因為該組件的實現過程就是參考了 element-plus 的實現，在 element-plus 上傳的基礎上添加了粘貼上傳交互，該組件的實現重在交互方式，各個樣式風格通過插槽自定義。