ElementUI 文件上传组件使用教程 - 实现文件上传功能

ElementUI 提供了一个 el-upload 组件来实现文件上传功能。以下是一个简单的示例：

<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/"  
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-upload="beforeUpload"
    :on-success="handleSuccess"
    :on-error="handleError"
    :limit="3"
    :file-list="fileList"
    :auto-upload="false">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-tooltip class="upload-demo-tip" effect="dark" content='上传文件格式支持xlsx、xls、csv、txt' placement="top">
     <i class="el-icon-info"></i>
    </el-tooltip>
    <div slot="tip" class="upload-demo-tip">只能上传xlsx、xls、csv、txt文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    handlePreview(file) {
      console.log('handlePreview', file)
    },
    handleRemove(file, fileList) {
      console.log('handleRemove', file, fileList)
    },
    beforeUpload(file) {
      console.log('beforeUpload', file)
    },
    handleSuccess(response, file, fileList) {
      console.log('handleSuccess', response, file, fileList)
    },
    handleError(error, file, fileList) {
      console.log('handleError', error, file, fileList)
    }
  }
}
</script>

在上面的示例中，el-upload 组件的 action 属性指定了上传文件的目标地址。beforeUpload 属性可以指定在上传前进行的操作，比如限制文件大小和类型。on-success 和 on-error 属性分别指定了上传成功和上传失败时的回调函数。file-list 属性用于维护已上传的文件列表。auto-upload 属性控制是否自动上传文件。

此外，el-upload 组件还提供了其他一些属性，比如 limit 属性可以限制上传文件的数量，trigger-slot 可以自定义上传按钮的样式。更多详细信息请参考官方文档。