element ui vue怎么做上传文件

在 Element UI 中，你可以使用 `el-upload` 组件来实现文件上传功能。以下是一个简单的示例代码：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/your-upload-url"
      :auto-upload="false"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <el-button @click="submitUpload" type="success" size="small">上传到服务器</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      // 文件上传成功后的回调函数
      console.log(response)
    },
    beforeUpload(file) {
      // 文件上传之前的钩子函数，用于限制文件类型和大小
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 0.5

      if (!isJPG) {
        this.$message.error('只能上传jpg/png文件！')
      }
      if (!isLt2M) {
        this.$message.error('文件大小不能超过500KB！')
      }

      return isJPG && isLt2M
    },
    submitUpload() {
      // 手动触发文件上传
      this.$refs.upload.submit()
    }
  }
}
</script>

在上面的代码中，`el-upload` 组件被用于创建一个文件上传区域。`action` 属性指定了文件上传的接口地址，`auto-upload` 属性设为 `false`，表示关闭自动上传，只有在点击 "上传到服务器" 按钮时才触发上传。`before-upload` 属性可以用来进行文件类型和大小的校验。`handleSuccess` 方法用于处理文件上传成功后的回调函数。

你可以根据自己的需求进行相应的样式和逻辑修改，这只是一个简单的示例。希望对你有所帮助！