element ui文件上传

要使用 Element UI 的文件上传组件，需要先引入 Element UI 库和相关样式文件。然后在代码中使用 el-upload 标签即可。

示例代码如下：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-upload="beforeUpload"
    :file-list="fileList"
    :auto-upload="false">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handlePreview(file) {
      console.log(file);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    submitUpload() {
      this.$refs.upload.submit();
    }
  }
};
</script>

<style>
.upload-demo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
</style>

在这个示例中，我们使用了 el-upload 组件，并设置了一些属性和方法：

- action：上传文件的地址。
- on-preview：点击文件列表中已上传的文件时触发的方法。
- on-remove：点击删除按钮时触发的方法。
- before-upload：上传文件之前的校验方法。
- file-list：已上传的文件列表。
- auto-upload：是否自动上传文件。