el-upload 上传图片自动上传
时间: 2025-01-24 10:07:18 浏览: 41
### 配置 `el-upload` 组件实现自动上传
为了使 `el-upload` 组件在选择文件后立即开始上传,需调整组件的属性配置。具体来说,应将 `auto-upload` 属性设为 `true`。此设置允许一旦选择了文件就立刻启动上传过程[^1]。
下面是一个简单的 Vue 实现例子:
```vue
<template>
<div>
<!-- 使用 auto-upload="true" 来启用自动上传 -->
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-upload="beforeAvatarUpload"
:file-list="fileList"
:auto-upload="true">
<el-button slot="trigger" type="primary">选取文件</el-button>
<el-button type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
fileList: []
};
},
methods: {
submitUpload() {},
handlePreview(file) {},
handleRemove(file, fileList) {},
beforeAvatarUpload(file) {}
}
};
</script>
```
在这个模板里,通过设定 `<el-upload>` 的 `auto-upload` 属性为 `true`,当用户选择了一个或多个文件之后会马上执行上传操作而无需额外点击提交按钮。
阅读全文
相关推荐


















