upload elementui

以下是关于 Element UI 上传组件的使用方法和注意事项：

安装与引入

确保已安装 Element UI 库，可通过 npm 或 yarn 安装：

npm install element-ui

在项目中引入 Upload 组件：

import { Upload } from 'element-ui';
Vue.use(Upload);

基础用法

通过 el-upload 标签实现文件上传功能，需配置 action 属性指定上传地址：

<el-upload action="/upload">
  <el-button type="primary">点击上传</el-button>
</el-upload>

文件限制

通过 limit 和 on-exceed 控制文件数量和超出限制时的行为：

<el-upload 
  action="/upload" 
  :limit="3" 
  :on-exceed="handleExceed">
  <el-button type="primary">最多上传3个文件</el-button>
</el-upload>

文件类型校验

使用 before-upload 钩子进行文件类型或大小校验：

methods: {
  beforeUpload(file) {
    const isJPG = file.type === 'image/jpeg';
    if (!isJPG) {
      this.$message.error('仅支持 JPG 格式');
    }
    return isJPG;
  }
}

自定义上传行为

通过 http-request 覆盖默认上传行为，实现自定义逻辑：

<el-upload :http-request="customUpload">
  <el-button type="primary">自定义上传</el-button>
</el-upload>

多文件与拖拽上传

启用 multiple 和 drag 属性支持多文件和拖拽功能：

<el-upload action="/upload" multiple drag>
  <i class="el-icon-upload"></i>
  <div>将文件拖到此处或<em>点击上传</em></div>
</el-upload>

服务端响应处理

监听 on-success 事件处理上传成功的响应：

methods: {
  handleSuccess(response, file) {
    this.$message.success(`文件 ${file.name} 上传成功`);
  }
}

注意事项

• 跨域问题需确保服务端配置 CORS。
• 大文件上传建议分片或使用 before-upload 校验大小。
• 动态 action 地址可通过函数返回。