当前位置：首页 > VUE

vue实现拖拽上传

2026-01-17 10:34:56VUE

Vue 拖拽上传实现方法

使用 HTML5 原生拖拽 API

在 Vue 中可以通过监听原生拖拽事件实现基础功能：

<template>
  <div 
    class="drop-zone"
    @dragover.prevent
    @dragenter.prevent
    @drop.prevent="handleDrop"
  >
    拖拽文件到此处上传
  </div>
</template>

<script>
export default {
  methods: {
    handleDrop(e) {
      const files = e.dataTransfer.files
      this.uploadFiles(files)
    },
    uploadFiles(files) {
      // 处理上传逻辑
      console.log('收到文件:', files)
    }
  }
}
</script>

<style>
.drop-zone {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
}
</style>

使用第三方库 vue-drag-drop

安装 vue-drag-drop 库：

npm install vue-drag-drop

组件实现示例：

<template>
  <drag-drop @files-dropped="handleFiles">
    <div class="drop-area">
      释放文件上传
    </div>
  </drag-drop>
</template>

<script>
import { DragDrop } from 'vue-drag-drop'

export default {
  components: { DragDrop },
  methods: {
    handleFiles(files) {
      // 处理文件上传
    }
  }
}
</script>

增强型拖拽上传组件

完整功能实现包含拖拽高亮、文件验证等：

<template>
  <div
    class="drop-zone"
    :class="{ 'drag-active': isDragActive }"
    @dragover.prevent="handleDragOver"
    @dragleave="handleDragLeave"
    @drop.prevent="handleDrop"
  >
    <input 
      type="file" 
      ref="fileInput" 
      @change="handleFileSelect"
      multiple
      style="display: none"
    >
    <button @click="$refs.fileInput.click()">选择文件</button>
    <p>或拖拽文件到此处</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragActive: false
    }
  },
  methods: {
    handleDragOver() {
      this.isDragActive = true
    },
    handleDragLeave() {
      this.isDragActive = false
    },
    handleDrop(e) {
      this.isDragActive = false
      const files = e.dataTransfer.files
      this.validateAndUpload(files)
    },
    handleFileSelect(e) {
      const files = e.target.files
      this.validateAndUpload(files)
    },
    validateAndUpload(files) {
      // 文件类型/大小验证
      const validFiles = Array.from(files).filter(file => {
        return file.size < 1024 * 1024 * 10 // 10MB限制
      })

      if(validFiles.length > 0) {
        // 上传逻辑
        this.$emit('files-selected', validFiles)
      } else {
        this.$emit('error', '文件不符合要求')
      }
    }
  }
}
</script>

<style>
.drop-zone {
  border: 2px dashed #999;
  padding: 40px;
  text-align: center;
  transition: all 0.3s;
}
.drag-active {
  border-color: #42b983;
  background-color: rgba(66, 185, 131, 0.1);
}
</style>

结合上传进度显示

使用 axios 实现带进度显示的上传：

methods: {
  async uploadFile(file) {
    const formData = new FormData()
    formData.append('file', file)

    try {
      const response = await axios.post('/upload', formData, {
        onUploadProgress: progressEvent => {
          const percent = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          )
          this.$emit('progress', { file, percent })
        }
      })
      this.$emit('uploaded', response.data)
    } catch (error) {
      this.$emit('error', error.message)
    }
  }
}