前端文件上傳的幾種交互造輪子
背景
作者：京東物流 劉海鼎
前端文件上傳本來是一個常規(guī)交互操作，沒什么特殊性可言，但是最近在做文件上傳，需要實現(xiàn)截圖粘貼上傳，去找了下有沒有什么好用的組件，網(wǎng)上提供的方法有，但是沒找完整的組件來支持cv上傳，經(jīng)過了解發(fā)現(xiàn)可以用剪貼板功能讓自己的cv實現(xiàn)文件上傳，于是自己就整合了目前幾種文件上傳的交互方式，碼了一個支持cv的vue3文件上傳組件（造個輪子）。
介紹
作為一個完整的組件內(nèi)容還是挺多的，這里主要介紹下上傳交互中一些主要功能，包括上傳的幾種交互方式，
上傳進(jìn)度的獲取，上傳類型的限制，默認(rèn)上傳請求和自定義上傳請求。
以下代碼都是非完整代碼，大家用于參考實現(xiàn)過程，可以通過以下代碼修改來完成自己想要的交互功能。
幾種交互
1，點擊選擇上傳
點擊選擇是最常見的上傳交互，之前原生上傳控件，樣式修改比較麻煩，為了修改上傳樣式，我們可以把該控件設(shè)置隱藏，用其他元素通過從click交互, 來觸發(fā)該文件選擇控件。在選擇文件控件上綁定onchange事件，該控件在change后獲取到文件，然后調(diào)用上傳方法，實現(xiàn)如下：
<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
? ? ? ?// 獲取到文件后調(diào)用附件上傳方法
? ? ? ?uploadFiles(files)
? ?}</script><style ?lang='less' scoped>
? ?.uploader-target { ? ? ? ?display: none;
? ?}</style>
2，拖動上傳
拖拽文件上傳，首先在頁面上建立一個拖放區(qū)域，在拖放區(qū)域上綁定拖放事件，監(jiān)聽拖放事件drop內(nèi)容中datTransfer中是包含files,如果存在files，獲取files然后調(diào)用上傳附件方法。
拖放區(qū)域可以通過事件dragover來檢查拖放文件是否進(jìn)入拖放區(qū)域來設(shè)置拖放區(qū)域懸浮樣式，通過dragleave來檢查離開拖放區(qū)取消懸浮樣式。
進(jìn)行交互提示
實現(xiàn)如下：
<div class="uploader-drag" v-if="props.uploadMode == 'drag'" :class="['dragger', dragover ? 'dragover' : '']" .prevent="onDrop" .prevent="onDragover"
? ? .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，復(fù)制上傳（復(fù)制檢測區(qū)域設(shè)置）
復(fù)制上傳的交互步驟
?將文件保存到剪貼板: 執(zhí)行鍵盤快捷鍵或者使用鼠標(biāo)復(fù)制
?將鼠標(biāo)移動到可粘貼區(qū)： 判斷是否移動到可粘貼區(qū)，來確定是否在執(zhí)行粘貼后上傳，否則整個頁面都會作為粘貼區(qū)，
?執(zhí)行粘貼操作：執(zhí)行鍵盤粘貼快捷鍵（ctrl+v）
粘貼區(qū)綁定paste事件，在觸發(fā)paste事件前將鼠標(biāo)移到粘貼區(qū)，復(fù)制會被檢查不在粘貼區(qū)，阻止上傳操作，實現(xiàn)如下：
<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"
>
? ? <!--默認(rèn)插槽內(nèi)容-->
? ? <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>
上傳模式
根據(jù)以上三種交互，大家可自由組合上傳形式，比如點擊和拖拽，拖拽和粘貼組合等等，我這邊目前按點擊，拖拽，粘貼疊加組合，設(shè)置為：
?點擊上傳，click
?拖拽上傳 drag（包括點擊上傳和拖拽上傳）
?粘貼上傳 paste （包括點擊，拖拽和復(fù)制上傳）
通過傳參 uploadeMode設(shè)置 （click, drag, paste）
組件設(shè)置：
<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>
組件應(yīng)用
<Upload action="https://jsonplaceholder.typicode.com/posts/" uploadMode="click">
? ?<div>點擊上傳</div></Upload><script lang="ts">
? ?import Upload from '@/components/uploader';</script>
文件限制
文件限制包括是否多文件上傳限制multiple， 上傳數(shù)量limit限制，上傳類型accept限制，這些設(shè)置參考了element-plus上傳組件，在其基礎(chǔ)上做了簡化。實現(xiàn)如下
multiple 和 accept 首先需要在點擊控件上綁定，以便于在點擊選擇上傳時就能夠過濾對應(yīng)文件，拖拽上傳和粘貼上傳，無法通過input[type=file] 組件控制需要在上傳方法中判斷過濾，(以粘貼上傳為例)
組件實現(xiàn)
<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)
? ? ? ?} ? ? ? ?// 文件數(shù)量
? ? ? ?if (limit && files.length > limit) { ? ? ? ? ? ?/*具體大家需要的邏輯可自行定義*/
? ? ? ? ? ?return
? ? ? ?} ? ? ? ?// 文件類型限制
? ? ? ?if (accept) {
? ? ? ? ? ?files = filesFiltered(Array.from(files), accept)
? ? ? ?} ? ? ? ?//在文件符合條件后執(zhí)行上傳方法
? ?} ? ?// 文件過濾
? ?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>
上傳進(jìn)度設(shè)置
獲取文件上傳進(jìn)度，使用ajax中的progress 事件監(jiān)聽機(jī)制，回傳數(shù)據(jù)loaded進(jìn)度，和ttotal進(jìn)行計算，獲取到計算的百分比通過process插槽線上在界面上。
具體實現(xiàn)如下:
組件實現(xiàn)
文件限制后執(zhí)行組件上傳，默認(rèn)情況下走內(nèi)置的上傳方法，如果做了自定義，上傳進(jìn)度也需要自己實現(xiàn)（自己實現(xiàn)過程可以參考內(nèi)置方法中的實現(xiàn)）
// 上傳方法調(diào)用ajaxUpload({...props, file})// 上傳方法實現(xiàn)ajaxUpload = (options) => {const xhr = new XMLHttpRequest() ? ?const action = option.action
? ?console.log(xhr, xhr.upload) ? ?if (xhr.upload) { ? ?// 建立progress監(jiān)聽
? ? ?xhr.upload.addEventListener('progress', (evt:any) => { ? ? ? ?const progressEvt = evt
? ? ? ?progressEvt.percent = evt.total > 0 ? (evt.loaded / evt.total) * 100 : 0
? ? ? ?// 回傳進(jìn)度數(shù)據(jù)
? ? ? ?option.onProgress(progressEvt)
? ? ?})
? ?}
}
同樣文件上傳成功，異常等方法也可以通過監(jiān)聽load并且判斷 xhr.status 來實現(xiàn)，
xhr.addEventListener('load', () => { ? ? ?if (xhr.status < 200 || xhr.status >= 300) { ? ? ? ?return option.onError(getError(action, option, xhr))
? ? ?}
? ? ?option.onSuccess(getBody(xhr))
})
組件使用
?配置獲取進(jìn)度數(shù)據(jù)回調(diào)函數(shù) onProgress
?配置接收回傳的進(jìn)度數(shù)據(jù)進(jìn)行賦值
?配置進(jìn)度條插槽顯示進(jìn)度數(shù)據(jù)
<Upload action="https://jsonplaceholder.typicode.com/posts/" :limit="3" uploadMode="click" :onProgress="progress">
? <div class="button">點擊上傳</div>
? <template v-slot:progress>
? ? ? <!-自定義的進(jìn)度條樣式，大家可以根據(jù)自己的想象，自行設(shè)置進(jìn)度條樣式--> ? ? ? <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>
自定義上傳請求
默認(rèn)情況下，不需要自定義上傳請求，組件內(nèi)置了上傳請求，如果個人有需求可以自定義上傳請求，子定義上傳請求，是在文件限制流程后，檢查是否有自定義請求方法，如果存在就將文件傳入自定義請求方法。
組件實現(xiàn)：
// 上傳文件const uploadFiles = (files) => { ? ?if (files.length === 0) return
? ?const { limit, multiple, accept, httpRequest } = props ? ?// 是否多文件限制，主要用于拖拽和粘貼上傳中
? ?if (!multiple) {
? ? ? files = Array.from(files).slice(0, 1)
? ?} ? ?// 文件數(shù)量
? ?if (limit && files.length > limit) { ? ? ? /*具體大家需要的邏輯可自行定義*/
? ? ? return
? ?} ? ?// 文件類型限制
? ?if (accept) {
? ? ? files = filesFiltered(Array.from(files), accept)
? ?} ? ?//在文件符合條件后執(zhí)行上傳方法
? ?// 自定義上傳方法調(diào)用
? ?if(httpRequest) { ? ? ? return httpRequest(files)
? ?}
}
組件應(yīng)用：
注意點： 通過自定義上傳方法實現(xiàn)時，在原來組件上的屬性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>
總結(jié)
通過以上可以實現(xiàn)一個支持多種交互方式的文件上傳組件，同時也將element-plus中文件上傳的流程做了一個學(xué)習(xí)，因為該組件的實現(xiàn)過程就是參考了element-plus的實現(xiàn)，在element-plus上傳的基礎(chǔ)上添加了粘貼上傳交互, 該組件的實現(xiàn)重在交互方式，各個樣式風(fēng)格通過插槽自定義。
