el-upload 上传单张图片
时间: 2023-12-01 13:42:39 浏览: 124
以下是使用el-upload组件上传单张图片的示例代码:
```html
<template>
<el-upload
class="upload-demo"
action="#"
:auto-upload="false"
:on-change="handleChange"
:file-list="fileList"
:limit="1"
list-type="picture-card">
<i class="el-icon-plus"></i>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: []
};
},
methods: {
handleChange(file, fileList) {
// 限制只能上传一张图片
if (fileList.length > 1) {
fileList.splice(0, fileList.length - 1);
}
// 处理上传成功后的回调
if (file.status === "success") {
// 在这里可以获取到上传成功后的文件信息
console.log(file.response);
}
}
}
};
</script>
```
在上述代码中,我们使用了el-upload组件,并设置了以下属性:
- `:auto-upload="false"`:禁止自动上传文件,需要手动触发上传。
- `:on-change="handleChange"`:当文件状态改变时触发handleChange方法。
- `:file-list="fileList"`:用于回显已上传的文件列表。
- `:limit="1"`:限制最多只能上传一张图片。
- `list-type="picture-card"`:设置上传列表的样式为图片卡片。
在handleChange方法中,我们对上传的文件进行了一些处理:
- 限制只能上传一张图片。
- 处理上传成功后的回调,可以在这里获取到上传成功后的文件信息。
阅读全文
相关推荐














