背景

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

介紹

作為一個完整的元件内容還是挺多的，這裡主要介紹下上傳互動中一些主要功能，包括上傳的幾種互動方式，

上傳進度的擷取，上傳類型的限制，預設上傳請求和自定義上傳請求。

以下代碼都是非完整代碼，大家用于參考實作過程，可以通過以下代碼修改來完成自己想要的互動功能。

幾種互動

1，點選選擇上傳

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

<div class="uploader-content" @click="handleClick">
     <input ref="inputRef" 
          class="uploader-target" 
          :name="name" :multiple="multiple" 
          :accept="accept" type="file"
          @change="handleChange" />
</div>
<script setup>
    const inputRef = shallowRef(null)
    const handleClick = () => {
        inputRef.value.value = ''
        inputRef.value?.click()
    }
    const handleChange = (e) => {
        const files = e.target.files
        if (!files) return
        // 擷取到檔案後調用附件上傳方法
        uploadFiles(files)
    }
</script>
<style  lang='less' scoped>
    .uploader-target {
        display: none;
    }
</style>

2，拖動上傳

拖拽檔案上傳，首先在頁面上建立一個拖放區域，在拖放區域上綁定拖放事件，監聽拖放事件drop内容中datTransfer中是包含files,如果存在files，擷取files然後調用上傳附件方法。

拖放區域可以通過事件dragover來檢查拖放檔案是否進入拖放區域來設定拖放區域懸浮樣式，通過dragleave來檢查離開拖放區取消懸浮樣式。

進行互動提示

實作如下：

<div class="uploader-drag" v-if="props.uploadMode == 'drag'" :class="['dragger', dragover ? 'dragover' : '']" @drop.prevent="onDrop" @dragover.prevent="onDragover"
     @dragleave.prevent="dragover = false">
     <div class="dragicon-box">
         <span>+</span>
     </div>
  </div>
<script setup>
const dragover = ref(false)
const onDrop = (e) => {
        const files = Array.from(e.dataTransfer?.files)
        dragover.value = false
        uploadFiles(files);
    }
const onDragover = () => {
        dragover.value = true
    }
</script>

3，複制上傳（複制檢測區域設定）

複制上傳的互動步驟

•将檔案儲存到剪貼闆: 執行鍵盤快捷鍵或者使用滑鼠複制

•将滑鼠移動到可粘貼區：判斷是否移動到可粘貼區，來确定是否在執行粘貼後上傳，否則整個頁面都會作為粘貼區，

•執行粘貼操作：執行鍵盤粘貼快捷鍵（ctrl+v）

粘貼區綁定paste事件，在觸發paste事件前将滑鼠移到粘貼區，複制會被檢查不在粘貼區，阻止上傳操作，實作如下：

<div class="uploader-paste" 
     v-if="props.uploadMode == 'paste'" 
     :class="['dragger', dragover ? '' : '']" 
     @mouseover.stop="clipboardover = true"
     @mouseleave.stop="clipboardover = false"
     @drop.prevent="onDrop" 
     @dragover.prevent="onDragover"
     @dragleave.prevent="dragover = false"
     @paste="pasteFun"
 >
     <!--預設插槽内容-->
     <template v-if="$slots.default == null">
         <div class="dragicon-box">
             <span>+</span>
         </div>
     </template>
     <slot />
 </div>
<script setup>
  const  clipboardover = ref(false)
  const pasteFun = (e) => {
      if(!clipboardover.value) return
      const clipboardFile = e.clipboardData.files;
      uploadFiles(clipboardFile)
 }
</script>

上傳模式

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

•點選上傳，click

•拖拽上傳 drag（包括點選上傳和拖拽上傳）

•粘貼上傳 paste （包括點選，拖拽和複制上傳）

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

元件設定：

<div class="uploader-content" @click="handleClick">
    <input 
        ref="inputRef" 
        class="uploader-target" 
        :name="name" 
        :multiple="multiple" 
        :accept="props.accept" 
        type="file"
        @change="handleChange" 
        v-if="props.uploadMode != 'click'"
    />
   <!-- click -->
   <div class="uploader-click" v-if="props.uploadMode == 'click'">
        <slot />
        <input 
            ref="inputRef" 
            class="uploader-target" 
            :name="name" 
            :multiple="multiple" 
            :accept="accept" 
            type="file"
            @change="handleChange" 
            @click.stop />
    </div>
    <!-- drag -->
    <div class="uploader-drag" 
        v-if="props.uploadMode == 'drag'" 
        :class="['dragger', dragover ? 'dragover' : '']" 
        @drop.prevent="onDrop" 
        @dragover.prevent="onDragover"
        @dragleave.prevent="dragover = false">
         <template v-if="$slots.default == null">
             <div class="dragicon-box">
                 <span>+</span>
              </div>
          </template>
          <slot />
     </div>
     <!-- copy -->
     <div class="uploader-paste" 
          v-if="props.uploadMode == 'paste'" 
          :class="['dragger', dragover ? '' : '']" 
          @mouseover.stop="clipboardover = true"
          @mouseleave.stop="clipboardover = false"
          @drop.prevent="onDrop" 
          @dragover.prevent="onDragover"
          @dragleave.prevent="dragover = false"
          @paste="pasteFun"
       >
          <template v-if="$slots.default == null">
              <div class="dragicon-box">
                 <span>+</span>
               </div>
          </template>
          <slot />
        </div>
    </div>
</template>

元件應用

<Upload action="https://jsonplaceholder.typicode.com/posts/" uploadMode="click">
    <div>點選上傳</div>
</Upload>
<script lang="ts">
    import Upload from '@/components/uploader';
</script>

檔案限制

檔案限制包括是否多檔案上傳限制multiple，上傳數量limit限制，上傳類型accept限制，這些設定參考了element-plus上傳元件，在其基礎上做了簡化。實作如下

multiple 和 accept 首先需要在點選控件上綁定，以便于在點選選擇上傳時就能夠過濾對應檔案，拖拽上傳和粘貼上傳，無法通過input[type=file] 元件控制需要在上傳方法中判斷過濾，(以粘貼上傳為例)

元件實作

<div class="uploader-content" @click="handleClick">
        <input ref="inputRef" 
               class="uploader-target" 
               :name="name" :multiple="multiple" :accept="props.accept" type="file"
                @change="handleChange" v-if="props.uploadMode != 'click'" @click.stop />

        <div class="uploader-paste" v-if="props.uploadMode == 'paste'" :class="['dragger', dragover ? '' : '']" 
            @mouseover.stop="clipboardover = true"
            @mouseleave.stop="clipboardover = false"
            @drop.prevent="onDrop" 
            @dragover.prevent="onDragover"
            @dragleave.prevent="dragover = false"
            @paste="pasteFun"
            >
            <template v-if="$slots.default == null">
                <div class="dragicon-box">
                    <span>+</span>
                </div>
            </template>
            <slot />
        </div>
    </div>
<script setup>
    import { shallowRef, ref } from 'vue';
    const inputRef = shallowRef(null)
    // 上傳檔案
    const uploadFiles = (files) => {
        if (files.length === 0) return
        const { limit, multiple, accept } = props
        // 是否多檔案限制，主要用于拖拽和粘貼上傳中
        if (!multiple) {
            files = Array.from(files).slice(0, 1)
        }
        // 檔案數量
        if (limit && files.length > limit) {
            /*具體大家需要的邏輯可自行定義*/
            return
        }
        // 檔案類型限制
        if (accept) {
            files = filesFiltered(Array.from(files), accept)
        }
        //在檔案符合條件後執行上傳方法
    }
    // 檔案過濾
    const filesFiltered = (files, accept) => {
        return files.filter((file) => {
            const { type, name } = file
            const extension = name.includes('.') ? `.${name.split('.').pop()}` : ''
            const baseType = type.replace(/\/.*$/, '')
            return accept
                .split(',')
                .map((type) => type.trim())
                .filter((type) => type)
                .some((acceptedType) => {
                    if (acceptedType.startsWith('.')) {
                        return extension === acceptedType
                    }
                    if (/\/\*$/.test(acceptedType)) {
                        return baseType === acceptedType.replace(/\/\*$/, '')
                    }
                    if (/^[^/]+\/[^/]+$/.test(acceptedType)) {
                         type === acceptedType
                    }
                    return false
             })
        })
    }

</script>

上傳進度設定

擷取檔案上傳進度，使用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

•配置接收回傳的進度資料進行指派

•配置進度條插槽顯示進度資料

<Upload action="https://jsonplaceholder.typicode.com/posts/" :limit="3" uploadMode="click" :onProgress="progress">
   <div class="button">點選上傳</div>
   <template v-slot:progress>
       <!-自定義的進度條樣式，大家可以根據自己的想象，自行設定進度條樣式-->
       <div class="progress-box">
          <div class="progress">
             <span class="line" :style="{'width': progressval + '%'}"></span>
           </div>
           <span class="val">{{progressval}} %</span>
        </div>
   </template>
</Upload>
<script setup>
import {ref} from 'vue'
import Upload from '@/components/uploader';
const progressval = ref(0)
const progress = (evt)=>{
      progressval.value = evt.percent.toFixed(2)
},
// 上傳成功
const uploadSucess = (e)=>{
      console.log('sucess', e)
}
// 上傳異常
const uploadError= (e)=> {
   console.log('sucess', e)
}
</script>

自定義上傳請求

預設情況下，不需要自定義上傳請求，元件内置了上傳請求，如果個人有需求可以自定義上傳請求，子定義上傳請求，是在檔案限制流程後，檢查是否有自定義請求方法，如果存在就将檔案傳入自定義請求方法。

元件實作：

// 上傳檔案
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無效

<Upload :limit="3" uploadMode="click" :onProgress="progress" :onSuccess="uploadSucess" :onError="uploadError" :httpRequest="httpRequest">
    <div class="button">點選上傳</div>
    <template v-slot:progress>
       <div class="progress-box">
          <div class="progress">
              <span class="line" :style="{'width': progressval + '%'}"></span>
           </div>
           <span class="val">{{progressval}} %</span>
       </div>
    </template>
 </Upload>
<script setup>
   const httpRequest = (files)=> {
      // 擷取到檔案 ，自定已上傳方法
   }
</script>

總結

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

作者：京東物流劉海鼎

來源：京東雲開發者社群

前端檔案上傳的幾種互動造輪子

背景

介紹

幾種互動

上傳模式

檔案限制

上傳進度設定

自定義上傳請求

總結

繼續閱讀

讓Android中的webview支援頁面中的檔案上傳

Salesforce:檔案上傳

angularjs上傳檔案+jfinal接收上傳檔案

使用fastDFS在angularjs中實作檔案上傳

ChatGPT學會自己提問題了，還支援多檔案上傳

上傳檔案上傳檔案

字元串形成txt檔案并上傳到伺服器 vue

SpringBoot實作微信小程式檔案上傳的完整案例

檔案傳輸緩慢，共享不便？資料太大，存儲空間不足？别擔心，聯通雲盤可以幫你解決這些問題。聯通雲盤集家庭雲、個人雲集多種功能

Spring Boot：檔案上傳

使用Vue和Spring Boot實作檔案上傳

SpringMVC--多檔案上傳（附帶執行個體）

基于DiskFileItemFactory實作的檔案上傳和進度監聽

[代碼審計]極緻CMS1.9.5存在檔案上傳漏洞

spingmvc 檔案上傳一、單檔案上傳二、多檔案上傳

檔案上傳參數的接收方式