elementui自定义文件上传

ElementUI提供了一个el-upload组件来实现文件上传功能，可以通过设置一些属性来自定义上传文件的行为。以下是一个自定义上传文件的示例代码：

<template>
  <el-upload
    class="upload"
    ref="upload"
    :file-list="fileList"
    :auto-upload="false"
    :http-request="uploadFile"
    :on-change="handleChange"
    :on-remove="handleRemove"
    multiple
  >
    <el-button slot="trigger" size="small" type="primary" @click="delFile">选取文件</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    uploadFile(file) {
      // 自定义上传文件的方法
      // 可以在这里将文件上传到后台服务器
    },
    handleChange(file, fileList) {
      // 文件选择后执行的方法
      // 可以在这里获取到选择的文件列表
      this.fileList = fileList;
    },
    handleRemove(file, fileList) {
      // 移除文件后执行的方法
      // 可以在这里更新文件列表
      this.fileList = fileList;
    },
    delFile() {
      // 触发选择文件的方法
      this.$refs.upload.click();
    }
  }
};
</script>

在这个示例中，我们设置了el-upload组件的一些属性来自定义上传文件的行为，例如取消自动上传、自定义上传方法、文件选择后执行的方法、移除文件后执行的方法等。同时，我们还可以通过设置一些样式来美化上传文件的界面。