element-plus的文件上传的使用

Element-Plus 的文件上传组件是 <el-upload>，使用起来非常方便。首先需要在页面上引入 Element-Plus 的样式文件（CSS），以及 Element-Plus 和 Vue 的 JavaScript 文件，然后就可以在组件中使用 <el-upload> 了。

以下是一个简单的使用示例：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :on-success="handleUploadSuccess"
    :headers="{
      Authorization: 'Bearer ' + token,
    }"
    :multiple="true"
    :limit="3"
    :file-list="fileList"
    :auto-upload="false"
    :show-file-list="false"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传 JPG/PNG 文件，且不超过 500kb</div>
  </el-upload>
</template>

<script>
import { ElUpload, ElButton } from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

export default {
  components: {
    ElUpload,
    ElButton,
  },
  data() {
    return {
      token: 'xxxxx',
      fileList: [],
    };
  },
  methods: {
    handleUploadSuccess(response, file, fileList) {
      console.log(response, file, fileList);
    },
  },
};
</script>

这个示例中，我们配置了一些属性：

- `action`：上传文件的 URL，我们可以将文件上传到服务器的指定地址。
- `on-success`：文件上传成功后的回调函数。
- `headers`：上传文件时需要附加的 HTTP 头部信息。
- `multiple`：是否允许选择多个文件。
- `limit`：最多可以上传的文件数量。
- `file-list`：已经上传的文件列表。
- `auto-upload`：是否在选择文件后立即上传。
- `show-file-list`：是否显示已经上传的文件列表。
- `slot="tip"`：提示信息的样式。

以上就是一个简单的 Element-Plus 文件上传组件的使用示例。如果您有任何疑问或建议，请随时联系我们哦~