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地址可通过函数返回。
