El-upload怎么用
时间: 2023-07-05 14:15:50 浏览: 93
vue-cli3.0+element-ui上传组件el-upload的使用
5星 · 资源好评率100%
El-upload 是一个基于 Element UI 的上传组件,可以用于上传文件或图片。使用 El-upload 组件需要先引入 Element UI 库。
以下是 El-upload 的基本使用方法:
1. 引入 Element UI 库和 El-upload 组件:
```html
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
```
2. 在 Vue 实例中注册 El-upload 组件:
```javascript
Vue.component('el-upload', ElUpload);
```
3. 在模板中使用 El-upload 组件:
```html
<el-upload
class="upload-demo"
action="/upload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件,且不超过 500kb</div>
</el-upload>
```
其中,`action` 属性指定上传文件的地址,`on-preview` 和 `on-remove` 属性分别指定文件预览和文件删除的回调函数,`file-list` 属性指定已上传的文件列表,`auto-upload` 属性指定是否自动上传文件。
以上是 El-upload 的基本使用方法,你可以根据自己的需求修改配置。
阅读全文