前端文件上传的几种交互造轮子 | 京东云技术团队

背景

前端文件上传本来是一个常规交互操作，没什么特殊性可言，但是最近在做文件上传，需要实现截图粘贴上传，去找了下有没有什么好用的组件，网上提供的方法有，但是没找完整的组件来支持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'