前端檔案上傳本來是一個常規互動操作，沒什麼特殊性可言，但是最近在做檔案上傳，需要實現截圖貼上上傳，去找了下有沒有什麼好用的元件，網上提供的方法有，但是沒找完整的元件來支援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上傳的基礎上新增了貼上上傳互動, 該元件的實現重在互動方式，各個樣式風格通過插槽自定義。
作者：京東物流 劉海鼎
來源：京東雲開發者社群