vue使用element-ui上传附件代码

以下是一个基本的使用Element-UI上传附件的示例代码：

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

<script>
export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    handlePreview(file) {
      console.log(file);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
  },
};
</script>

其中，`el-upload` 组件有以下几个重要属性：

- `action`：上传的目标地址。
- `on-preview`：文件预览的回调函数。
- `on-remove`：文件移除的回调函数。
- `file-list`：已上传的文件列表。
- `auto-upload`：是否自动上传。

在上述代码中，`el-upload` 组件的 `file-list` 和 `auto-upload` 属性都被绑定到了组件的数据中，而 `on-preview` 和 `on-remove` 属性则被绑定到了组件的方法中。`el-upload` 组件内部包含了两个按钮，一个用于选取文件，一个用于手动触发上传。在 `submitUpload` 方法中，通过 `$refs.upload` 获取到了 `el-upload` 组件的引用，并调用其 `submit` 方法来手动触发上传。