vue结合elemplentui上传文件功能

Vue结合ElementUI实现文件上传功能可以通过以下步骤实现：

1. 在Vue项目中安装ElementUI

npm install element-ui --save

2. 在Vue项目中引入ElementUI

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

Vue.use(ElementUI)

3. 在Vue组件中添加文件上传组件

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/upload"
      :on-success="handleSuccess"
      :before-upload="beforeUpload">
      <el-button>点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      console.log(response)
    },
    beforeUpload(file) {
      console.log(file)
    }
  }
}
</script>

在上述代码中，我们使用了ElementUI提供的`el-upload`组件实现文件上传功能。通过`action`属性指定上传接口地址，通过`before-upload`属性指定文件上传前的回调函数，通过`on-success`属性指定文件上传成功后的回调函数。

4. 在Vue组件中添加样式

.upload-demo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  width: 200px;
  border: 1px dashed #ccc;
}

通过以上步骤，我们就可以实现基于Vue和ElementUI的文件上传功能。当用户点击上传按钮时，会触发`before-upload`回调函数进行文件上传前的处理，当文件上传成功后，会触发`on-success`回调函数进行文件上传成功的处理。