1. 基本用法:
<Upload
action="//example.com/upload"
:on-success="handleSuccess"
:on-error="handleError"
>
<Button icon="el-icon-upload2" type="primary">点击上传</Button>
</Upload>
在上述例子中，action 属性指定了上传文件的接口地址，on-success 和 on-error 用于处理上传成功和失败的回调。<Button> 组件是上传按钮的触发器。
methods: {
handleSuccess(response, file, fileList) {
console.log('上传成功', response, file, fileList);
},
handleError(error, file, fileList) {
console.error('上传失败', error, file, fileList);
}
}
2. 文件类型限制:
<Upload
action="//example.com/upload"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="beforeUpload"
accept="image/*"
>
<Button icon="el-icon-upload2" type="primary">上传图片</Button>
</Upload>
使用 accept 属性可以限制上传的文件类型。通过 before-upload 属性可以在上传前进行额外的验证。
methods: {
beforeUpload(file) {
const isImage = file.type.startsWith('image/');
if (!isImage) {
this.$message.error('只能上传图片文件');
}
return isImage;
}
}
3. 文件大小限制:
<Upload
action="//example.com/upload"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="beforeUpload"
:file-list="fileList"
:limit="3"
>
<Button icon="el-icon-upload2" type="primary">上传文件</Button>
</Upload>
使用 limit 属性可以限制上传文件的数量，通过 before-upload 属性可以在上传前进行额外的验证。
data() {
return {
fileList: []
};
},
methods: {
beforeUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error('上传文件大小不能超过 2MB');
}
return isLt2M;
}
}
4. 自定义请求头和参数:
<Upload
action="//example.com/upload"
:on-success="handleSuccess"
:on-error="handleError"
:data="{ userId: 1 }"
:headers="{ Authorization: 'Bearer ' + token }"
>
<Button icon="el-icon-upload2" type="primary">上传文件</Button>
</Upload>
使用 data 属性可以设置上传时附带的额外参数，通过 headers 属性可以设置请求头信息。
5. 自定义样式:
<Upload
action="//example.com/upload"
:on-success="handleSuccess"
:on-error="handleError"
class="custom-upload"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">点击上传</div>
</Upload>
通过添加自定义的类名，可以自定义上传组件的样式。
以上是一些常见的 Element-React Upload 组件的用法示例。你可以根据具体需求在项目中使用它们，并根据 Element-React 文档进行详细配置和使用说明。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5609/Element-React