用 vue 和 elementui 写一个文件上传界面

好的，我可以为您提供一些参考。您可以使用 Element UI 的 Upload 组件来实现文件上传界面，然后通过 Vue.js 的组件化开发方式来搭建整个界面。

首先，您需要在 Vue.js 中引入 Element UI 组件库，并在组件中导入 Upload 组件，然后使用 template 标签来编写界面布局。

以下是一个简单的 Vue.js 代码示例，可以作为参考：

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

<script>
import { Upload } from 'element-ui'

export default {
  components: {
    'el-upload': Upload
  },
  methods: {
    beforeUpload(file) {
      // 文件上传前的逻辑处理
    },
    onSuccess(response, file, fileList) {
      // 文件上传成功的逻辑处理
    }
  }
}
</script>

在上述示例中，我们使用了 Element UI 的 Upload 组件，设置了上传的地址和一些回调方法。在 beforeUpload 方法中，您可以对上传的文件进行一些处理，例如限制文件大小、文件类型等。在 onSuccess 方法中，您可以处理上传成功后的逻辑，例如将上传的文件列表展示出来。

这只是一个简单的示例，您可以根据自己的需求进行扩展和修改。希望对您有所帮助！