el-upload 是 Element UI 中的上传组件，用于实现文件上传功能。以下是 el-upload 的基本用法和一些常见配置：
1 基本用法：
1.安装 Element UI：
确保你的项目已经安装了 Element UI。
npm
2.引入 el-upload：
在需要使用的组件中引入 el-upload。
<template>
  <el-upload
    class="upload-demo"
    action="/uploadUrl"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    drag
    multiple>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>
<script>
export default {
  methods: {
    handleSuccess(response, file) {
      console.log(response, file);
    },
    beforeUpload(file) {
      // 在上传之前的处理，例如文件类型、大小检查
      console.log(file);
    },
  },
};
</script>
<style>
.upload-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
elementui登录界面  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.el-upload__tip {
  margin-top: 10px;
}
</style>
1 配置说明：
▪action: 文件上传的地址。
▪on-success: 文件上传成功的回调函数。
▪before-upload: 文件上传前的钩子，返回 false 或 ject 可以取消上传。
▪drag: 是否启用拖拽上传。
▪multiple: 是否支持多选文件。
▪show-file-list: 是否显示已上传文件列表。
▪file-list: 已上传文件列表。
以上是一个基本的 el-upload 的用法和配置示例，你可以根据具体的需求进行进一步配置和样式定制。详细的配置和 API 信息可以查阅 Element UI 官方文档。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。