elementui上传文件 name
时间: 2023-09-10 10:10:39 浏览: 38
ElementUI 的上传文件组件中,可以通过设置 `name` 属性来指定上传文件的参数名。例如:
```html
<el-upload
action="/upload"
name="file"
:http-request="uploadFile"
>
<el-button>上传文件</el-button>
</el-upload>
```
在这个例子中,上传的文件参数名将被设置为 `file`。在后台处理上传的文件时,可以通过该参数名来获取上传的文件内容。
相关问题
elementui 上传文件移除
您可以使用 Element UI 的 Upload 组件中的 `beforeRemove` 属性来定义移除文件之前的回调函数。该回调函数返回一个 Promise,当 Promise 的 resolve 被调用时,文件将被移除。示例如下:
```html
<template>
<el-upload
class="upload-demo"
action="/upload"
:before-remove="beforeRemove"
: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>
</template>
<script>
export default {
methods: {
beforeRemove(file, fileList) {
return new Promise((resolve, reject) => {
this.$confirm(`确定移除 ${file.name}?`)
.then(() => {
resolve();
})
.catch(() => {
reject();
});
});
},
submitUpload() {
this.$refs.upload.submit();
},
},
};
</script>
```
在上面的示例中,`beforeRemove` 方法会显示一个确认框,询问用户是否确定要移除文件。如果用户点击确认,Promise 的 resolve 方法将被调用,文件将被移除。如果用户点击取消,Promise 的 reject 方法将被调用,文件将不会被移除。
elementUI 表格 文件上传
ElementUI 表格(Table)组件提供了一个内置的文件上传组件(Upload)。你可以在表格中使用 Upload 组件来实现上传文件的功能。
下面是一个简单的示例,演示了如何在表格中使用 Upload 组件来上传文件:
```vue
<template>
<div>
<el-table :data="tableData">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column label="Avatar">
<template slot-scope="scope">
<el-upload
class="avatar-uploader"
action="//jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
>
<img v-if="scope.row.avatar" :src="scope.row.avatar" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: 'John Doe',
avatar: 'https://randomuser.me/api/portraits/men/1.jpg'
},
{
name: 'Jane Doe',
avatar: 'https://randomuser.me/api/portraits/women/1.jpg'
}
]
}
}
}
</script>
<style scoped>
.avatar-uploader {
display: inline-block;
width: 58px;
height: 58px;
border-radius: 50%;
background-size: cover;
background-position: center;
background-color: #eee;
}
.avatar {
width: 100%;
height: 100%;
border-radius: 50%;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 58px;
height: 58px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: #fff;
border: 1px dashed #d9d9d9;
cursor: pointer;
transition: .3s;
}
.avatar-uploader-icon:hover {
border-color: #409EFF;
color: #409EFF;
}
</style>
```
在这个示例中,我们在表格中使用了 Upload 组件,并将其作为表格列的模板(template)。表格数据的每一行都有一个名字(name)和一个头像(avatar)。头像列中的 Upload 组件用来上传文件,其中的 action 属性指定了上传文件的接口地址。这个示例中我们使用了 jsonplaceholder 的假接口。
需要注意的是,表格中使用的 Upload 组件的 prop 属性必须是唯一的,否则会导致上传文件的 bug。