vue使用element表单拖拽文件上传功能

要在Vue中使用Element UI的表单和拖拽文件上传功能，你需要结合Element UI的Upload组件和拖放API来实现。以下是一个示例：

1. 首先，确保已经安装并引入了Element UI和相应的样式。

2. 在Vue组件中，使用Element UI的Upload组件，并添加一个拖拽区域：

<template>
  <el-upload
    action="/upload"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :auto-upload="false"
    drag
    multiple
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或点击上传</div>
  </el-upload>
</template>

在这个示例中，我们使用了`el-upload`组件，并启用了拖拽功能(`drag`)和多文件上传(`multiple`)。你需要根据实际需求，设置`action`、`on-success`、`before-upload`和其他相关属性。

3. 在Vue组件的`methods`中定义处理上传成功和上传前的方法：

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      // 处理上传成功的逻辑
      // response为服务器返回的响应数据
    },
    beforeUpload(file) {
      // 处理上传前的逻辑
      // 返回false可以阻止文件上传
      // 返回Promise可以进行异步操作，比如文件校验等
    }
  }
};
</script>

在上述示例中，`handleSuccess`方法会在文件上传成功后被调用，你可以在此方法中处理上传成功后的逻辑。`beforeUpload`方法会在文件上传前被调用，你可以在此方法中进行上传前的逻辑处理。你可以根据需要修改这两个方法的具体实现。

4. 在CSS中为拖拽区域添加样式：

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

这样，你就可以在Vue中使用Element UI的表单和拖拽文件上传功能了。拖拽区域会显示一个上传图标和提示文字，用户可以将文件拖拽到该区域进行上传。上传的文件会发送到指定的服务器地址，并在上传成功后调用`handleSuccess`方法进行处理。