当前位置：首页 > article >正文

Vue项目中实现拖拽上传附件：原生JS与Element UI组件方法对比

article 2024/10/25 15:35:14

在现代化的Web应用中，文件上传是一个基本功能。随着技术的发展，拖拽上传已经成为提升用户体验的一个重要特性。在Vue项目中，我们可以通过原生JavaScript或使用Element UI组件来实现这一功能。下面我们将分别介绍这两种方法，并对比它们的优缺点。

一、使用原生JavaScript实现拖拽上传

1、创建HTML结构

<div id="drop_zone">将文件拖放到这里</div>

2、添加CSS样式

#drop_zone {
  border: 2px dashed #0087F7;
  border-radius: 5px;
  width: 300px;
  height: 200px;
  text-align: center;
  padding: 20px;
}

3、编写JavaScript逻辑

const dropZone = document.getElementById('drop_zone');

dropZone.addEventListener('dragover', (event) => {
  event.stopPropagation();
  event.preventDefault();
  event.dataTransfer.dropEffect = 'copy';
});

dropZone.addEventListener('drop', (event) => {
  event.stopPropagation();
  event.preventDefault();
  const files = event.dataTransfer.files;
  // 处理文件上传
  handleFiles(files);
});

function handleFiles(files) {
  const formData = new FormData();
  for (let i = 0; i < files.length; i++) {
    formData.append('file', files[i]);
  }
  // 发送文件到服务器
  uploadFiles(formData);
}

function uploadFiles(formData) {
  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log('上传成功:', data);
  })
  .catch(error => {
    console.error('上传失败:', error);
  });
}

二、使用Element UI组件实现拖拽上传

1、安装Element UI

npm install element-ui --save

2、引入Element UI

在 main.js 中引入并使用Element UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3、创建Vue组件

<template>
  <el-upload
    class="upload-demo"
    drag
    action="/upload"
    multiple>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
export default {
  name: 'ElementUpload'
};
</script>