前端如何实现文件的拖拽和点击上传

有些时候在上传文件时为了让用户的体验感更好，我们不能单一的光有点击上传应该有拖拽上传，类似于下面的效果。

下面是具体的实现步骤：

首先我们需要有一个type类型为"file"的input元素并让这个元素隐藏，用label标签（注意这里必须使用label标签，其他的标签用for和id连接是不可以生效的）通过for和id进行连接，这样你点label标签input标签就会有响应，最后通过@change事件拿到自己上传的数据；拖拽上传首先要有一个大的盒子，给他绑定上@drop事件，但是要注意这个事件是有默认事件的，因此你需要通过@dragover.prevent或者通过e.preventDefault()取消默认事件，这样他就不会跳转到另一个页面并打开你的文件了

这个是html的代码实现

<div class="dragBox" @dragover.prevent  @drop="handleDrop">
      <label for="file-input"  class="chooseFile">
        <p class="firstLine">选择面试记录后 点击上传  <span>文件</span> 或者拖拽上传</p>
        <p class="secondLine">文件大小：限制大小2G以内 | 支持格式：支持多种格式</p>
      </label>
      <div class="fileName">
        <span v-if="selectedFile">{{ selectedFile.name }}</span>
      </div>
       <div class="uploadButton">
        <el-button type="primary" class="queryBox" @click="uploadFile" style="float: right; margin-right: 2px;">上传</el-button>
        <el-button type="info" plain class="queryBox" @click="cancellationUpload" style="float: right; margin-right: 15px;">取消</el-button>
       </div>
      <input type="file" id="file-input" @change="handleFileChange"  style="display: none;"/>
    </div>

这个是js的代码实现

// 拖拽文件上传
const handleDrop=(e)=>{
  e.preventDefault()
  selectedFile.value=e.dataTransfer.files[0]
}
// 上传面积视频
const uploadFile=async()=>{
  if(uploadInterviewId.value){
    changeFuMask()
  const formData = new FormData();
  formData.append('file', selectedFile.value);
  formData.append('id', uploadInterviewId.value);
  const res= await setFaceToFaceVideo(formData)
  changeFuMask()
  }else{
    ElMessage.error('请先选择面试记录')
  }
}
// 取消上传面经视频 
const cancellationUpload=()=>{
  selectedFile.value=null
}
// 点击上传文件
const handleFileChange=async(event)=>{
   selectedFile.value=event.target.files[0]
   event.target.value=''
}

总体结构就是这样，上面的代码我没有吧css附上，因为大家一般写的页面都不太一样，所以大家可以通过自己的构思写自己的css，如果大家有什么问题可以给我评论，我看见了都会回答。