element-ui upload 怎么用
时间: 2023-02-20 17:21:19 浏览: 60
Element-UI 的上传组件使用起来非常简单,只需要在页面中引入 Element-UI 的 upload 组件,然后设置 upload 组件的 action 属性,指定上传文件的服务器地址即可。
相关问题
element-ui upload 上传完会自动刷新
根据提供的引用内容,无法确定element-ui upload上传完会自动刷新的情况。但是可以通过以下方式禁止上传完自动刷新:
```html
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:auto-upload="false"
:on-change="handleChange"
:on-success="handleSuccess"
:on-error="handleError">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
```
在el-upload标签中设置auto-upload为false,然后在上传按钮中添加一个点击事件,通过该事件来手动上传文件,从而避免上传完自动刷新的情况。
element-ui upload自定义el-upload-list
您好,关于 element-ui 的上传组件 el-upload,您可以通过自定义 el-upload-list 来实现自定义上传列表的功能。
具体实现方法如下:
1. 在 el-upload 组件中添加属性 list-type="picture-card",并设置属性 action 为上传文件的地址。
2. 在 el-upload 组件中添加自定义 slot,用于自定义上传列表的显示。
3. 在自定义的上传列表组件中,使用 el-upload-list 组件来展示上传文件的列表。
4. 可以通过监听 el-upload 组件的 change 事件来获取上传的文件信息,并将上传的文件信息传递给自定义的上传列表组件,以展示上传文件的列表。
以下是一个简单的示例代码:
```html
<template>
<div>
<el-upload
class="upload-demo"
action="/upload"
list-type="picture-card"
:on-change="handleChange"
>
<i class="el-icon-plus"></i>
<div class="upload-text">上传图片</div>
</el-upload>
<custom-upload-list :file-list="fileList"></custom-upload-list>
</div>
</template>
<script>
import CustomUploadList from './CustomUploadList.vue';
export default {
components: {
CustomUploadList,
},
data() {
return {
fileList: [],
};
},
methods: {
handleChange(file, fileList) {
this.fileList = fileList;
},
},
};
</script>
```
CustomUploadList.vue 组件的代码如下:
```html
<template>
<el-upload-list class="custom-upload-list" :file-list="fileList">
<template slot-scope="{file}">
<div class="custom-list-item">
<img :src="file.url" class="custom-list-item-thumbnail">
<div class="custom-list-item-name">{{ file.name }}</div>
<div class="custom-list-item-actions">
<el-button size="small" type="text" @click="handleRemove(file)">删除</el-button>
</div>
</div>
</template>
</el-upload-list>
</template>
<script>
export default {
props: {
fileList: {
type: Array,
default: () => [],
},
},
methods: {
handleRemove(file) {
const index = this.fileList.indexOf(file);
if (index !== -1) {
this.fileList.splice(index, 1);
}
},
},
};
</script>
```
希望这个示例能够帮助到您。如果您有任何问题,请随时提出。