element upload怎么使用

element upload是一个基于Vue.js的文件上传组件，可以方便地实现文件上传功能。使用element upload需要先安装element-ui组件库，然后在需要使用的页面中引入相关组件。下面是一个简单的使用element upload的例子：

1. 在HTML文件中引入element-ui组件库和相关CSS文件

<!-- 引入element-ui组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入element-ui组件库的CSS文件 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

2. 在Vue组件中使用element upload

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/upload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-upload="beforeUpload"
      :file-list="fileList"
      :limit="fileLimit"
      :on-exceed="handleExceed"
      :headers="headers"
      :data="{fileType:fileType,fileSize:fileSize}"
      multiple>
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传{{fileType.join(',')}}格式的文件，且不超过{{fileSize}}MB</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [], // 上传后的文件列表
      fileType: ["pdf", "doc", "docx", "xls", "xlsx","txt","png","jpg", "bmp", "jpeg"], // 允许的文件类型
      fileSize: 50, // 运行上传文件大小，单位 M
      fileLimit: 5, // 附件数量限制
      headers: { "Content-Type": "multipart/form-data" }, // 请求头
    };
  },
  methods: {
    handlePreview(file) {
      console.log(file);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    beforeUpload(file) {
      const isLt50M = file.size / 1024 / 1024 < this.fileSize;
      if (!isLt50M) {
        this.$message.error(`上传文件大小不能超过 ${this.fileSize}MB!`);
      }
      const fileType = file.name.split(".").pop().toLowerCase();
      const isFileType = this.fileType.indexOf(fileType) !== -1;
      if (!isFileType) {
        this.$message.error(`只能上传${this.fileType.join(',')}格式的文件!`);
      }
      return isLt50M && isFileType;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 ${this.fileLimit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
  },
};
</script>

在上面的代码中，我们使用了el-upload组件来实现文件上传功能。其中，action属性指定了上传文件的地址，on-preview属性指定了文件预览的回调函数，on-remove属性指定了文件移除的回调函数，before-upload属性指定了文件上传前的校验函数，file-list属性指定了上传后的文件列表，limit属性指定了上传文件数量的限制，on-exceed属性指定了上传文件数量超过限制时的回调函数，headers属性指定了请求头，data属性指定了上传文件时需要传递的数据。