vue中使用element实现文件上传功能

可以使用Element UI的el-upload组件实现文件上传功能，示例代码如下：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :file-list="fileList"
    :headers="headers"
    :data="uploadData"
    :multiple="true"
    :limit="5"
    :accept="'image/*'"
    :on-exceed="handleExceed"
    :auto-upload="false"
    :list-type="'picture-card'"
    :show-file-list="false"
    :drag="true"
    :with-credentials="true"
    :disabled="false"
    :on-remove="handleRemove"
    :on-progress="handleProgress">
    <i class="el-icon-plus"></i>
    <div class="upload-text">将文件拖到此处，或<em>点击上传</em></div>
    <div slot="tip" class="upload-tip">只能上传jpg/png文件，且不超过5个文件</div>
  </el-upload>
</template>

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

export default {
  components: {
    'el-upload': Upload
  },
  data() {
    return {
      fileList: [],
      headers: {},
      uploadData: {},
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 上传成功回调
      console.log(response);
      console.log(file);
      console.log(fileList);
    },
    handleExceed(files, fileList) {
      // 超出文件个数限制触发
      this.$message.warning(`当前限制选择 ${this.limit} 个文件，您已选择 ${fileList.length} 个文件`);
    },
    beforeUpload(file) {
      // 上传前回调
      console.log(file);
    },
    handleRemove(file, fileList) {
      // 删除单个文件回调
      console.log(file);
      console.log(fileList);
    },
    handleProgress(event, file, fileList) {
      // 上传进度回调
      console.log(event);
      console.log(file);
      console.log(fileList);
    },
  },
};
</script>

以上示例代码中，我们使用了Vue和Element UI库，通过el-upload组件和其各种属性和方法完成了文件上传功能的实现。注意，示例代码中的上传接口地址和上传需要的参数等都需要根据具体情况进行修改。具体使用方法可参考Element UI官方文档。