背景
前端文件上傳本來是一個(gè)常規(guī)交互操作商蕴，沒什么特殊性可言励烦，但是最近在做文件上傳贝或，需要實(shí)現(xiàn)截圖粘貼上傳吼过，去找了下有沒有什么好用的組件锐秦，網(wǎng)上提供的方法有，但是沒找完整的組件來支持cv上傳盗忱，經(jīng)過了解發(fā)現(xiàn)可以用剪貼板功能讓自己的cv實(shí)現(xiàn)文件上傳酱床，于是自己就整合了目前幾種文件上傳的交互方式，碼了一個(gè)支持cv的vue3文件上傳組件（造個(gè)輪子）趟佃。
介紹
作為一個(gè)完整的組件內(nèi)容還是挺多的扇谣，這里主要介紹下上傳交互中一些主要功能，包括上傳的幾種交互方式闲昭，
上傳進(jìn)度的獲取罐寨，上傳類型的限制，默認(rèn)上傳請求和自定義上傳請求汤纸。
以下代碼都是非完整代碼衩茸，大家用于參考實(shí)現(xiàn)過程，可以通過以下代碼修改來完成自己想要的交互功能贮泞。
幾種交互
1，點(diǎn)擊選擇上傳
點(diǎn)擊選擇是最常見的上傳交互幔烛，之前原生上傳控件啃擦，樣式修改比較麻煩，為了修改上傳樣式饿悬，我們可以把該控件設(shè)置隱藏令蛉，用其他元素通過從click交互, 來觸發(fā)該文件選擇控件。在選擇文件控件上綁定onchange事件狡恬，該控件在change后獲取到文件珠叔，然后調(diào)用上傳方法，實(shí)現(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弟劲，拖動上傳
拖拽文件上傳祷安，首先在頁面上建立一個(gè)拖放區(qū)域，在拖放區(qū)域上綁定拖放事件兔乞，監(jiān)聽拖放事件drop內(nèi)容中datTransfer中是包含files,如果存在files汇鞭，獲取files然后調(diào)用上傳附件方法。
拖放區(qū)域可以通過事件dragover來檢查拖放文件是否進(jìn)入拖放區(qū)域來設(shè)置拖放區(qū)域懸浮樣式庸追，通過dragleave來檢查離開拖放區(qū)取消懸浮樣式霍骄。
進(jìn)行交互提示
實(shí)現(xiàn)如下：
<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，復(fù)制上傳（復(fù)制檢測區(qū)域設(shè)置）
復(fù)制上傳的交互步驟
- 將文件保存到剪貼板: 執(zhí)行鍵盤快捷鍵或者使用鼠標(biāo)復(fù)制
- 將鼠標(biāo)移動到可粘貼區(qū)： 判斷是否移動到可粘貼區(qū)淡溯，來確定是否在執(zhí)行粘貼后上傳读整，否則整個(gè)頁面都會作為粘貼區(qū)，
- 執(zhí)行粘貼操作：執(zhí)行鍵盤粘貼快捷鍵（ctrl+v）
粘貼區(qū)綁定paste事件咱娶，在觸發(fā)paste事件前將鼠標(biāo)移到粘貼區(qū)米间，復(fù)制會被檢查不在粘貼區(qū)煎楣，阻止上傳操作，實(shí)現(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ù)以上三種交互车伞，大家可自由組合上傳形式择懂，比如點(diǎn)擊和拖拽，拖拽和粘貼組合等等另玖，我這邊目前按點(diǎn)擊困曙，拖拽，粘貼疊加組合谦去，設(shè)置為：
點(diǎn)擊上傳慷丽，click
拖拽上傳 drag（包括點(diǎn)擊上傳和拖拽上傳）
粘貼上傳 paste （包括點(diǎn)擊，拖拽和復(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.stop />
<!-- 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>點(diǎn)擊上傳</div>
</Upload>
<script lang="ts">
import Upload from '@/components/uploader';
</script>
文件限制
文件限制包括是否多文件上傳限制multiple鳄哭， 上傳數(shù)量limit限制要糊，上傳類型accept限制，這些設(shè)置參考了element-plus上傳組件妆丘，在其基礎(chǔ)上做了簡化锄俄。實(shí)現(xiàn)如下
multiple 和 accept 首先需要在點(diǎn)擊控件上綁定，以便于在點(diǎn)擊選擇上傳時(shí)就能夠過濾對應(yīng)文件勺拣，拖拽上傳和粘貼上傳奶赠，無法通過input[type=file] 組件控制需要在上傳方法中判斷過濾，(以粘貼上傳為例)
- 組件實(shí)現(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)行計(jì)算苇经，獲取到計(jì)算的百分比通過process插槽線上在界面上。
具體實(shí)現(xiàn)如下:
- 組件實(shí)現(xiàn)
文件限制后執(zhí)行組件上傳宦言，默認(rèn)情況下走內(nèi)置的上傳方法扇单，如果做了自定義，上傳進(jìn)度也需要自己實(shí)現(xiàn)（自己實(shí)現(xiàn)過程可以參考內(nèi)置方法中的實(shí)現(xiàn)）
// 上傳方法調(diào)用
ajaxUpload({...props, file})
// 上傳方法實(shí)現(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 來實(shí)現(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">點(diǎn)擊上傳</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)置了上傳請求稽寒，如果個(gè)人有需求可以自定義上傳請求扮碧，子定義上傳請求，是在文件限制流程后，檢查是否有自定義請求方法慎王，如果存在就將文件傳入自定義請求方法蚓土。
- 組件實(shí)現(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)用：
注意點(diǎn)： 通過自定義上傳方法實(shí)現(xiàn)時(shí)赖淤，在原來組件上的屬性action無效
<Upload :limit="3" uploadMode="click" :onProgress="progress" :onSuccess="uploadSucess" :onError="uploadError" :httpRequest="httpRequest">
<div class="button">點(diǎn)擊上傳</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é)
通過以上可以實(shí)現(xiàn)一個(gè)支持多種交互方式的文件上傳組件，同時(shí)也將element-plus中文件上傳的流程做了一個(gè)學(xué)習(xí)咱旱，因?yàn)樵摻M件的實(shí)現(xiàn)過程就是參考了element-plus的實(shí)現(xiàn)确丢，在element-plus上傳的基礎(chǔ)上添加了粘貼上傳交互, 該組件的實(shí)現(xiàn)重在交互方式，各個(gè)樣式風(fēng)格通過插槽自定義吐限。
