elementplusui上传图片
时间: 2023-07-25 15:30:18 浏览: 51
Element Plus UI 提供了一个上传文件的组件,可以用于上传图片。下面是一个简单的示例代码:
```html
<template>
<el-upload
class="upload-demo"
action="your-upload-api"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-upload="beforeUpload"
:file-list="fileList"
list-type="picture-card"
:auto-upload="false">
<i class="el-icon-plus"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: []
}
},
methods: {
handlePreview(file) {
console.log(file)
},
handleRemove(file, fileList) {
console.log(file, fileList)
},
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
const isLt500K = file.size / 1024 < 500
if (!isJPG) {
this.$message.error('上传图片只能是 JPG 格式!')
}
if (!isLt500K) {
this.$message.error('上传图片大小不能超过 500KB!')
}
return isJPG && isLt500K
}
}
}
</script>
```
在上面的示例代码中,我们使用了 `el-upload` 组件,并设置了一些属性和方法:
- `action`:上传图片的 API 地址。
- `on-preview`:点击文件列表中的预览按钮时触发的方法。
- `on-remove`:点击文件列表中的删除按钮时触发的方法。
- `before-upload`:上传文件前的校验方法。
- `file-list`:已上传的文件列表。
- `list-type`:文件列表的展示方式,这里使用了 `picture-card`,表示以卡片形式展示图片。
- `auto-upload`:是否自动上传文件。
在 `before-upload` 方法中,我们对上传的文件进行了一些校验,例如文件类型、文件大小等。如果校验不通过,则会弹出错误提示。如果校验通过,则返回 `true`,表示可以上传文件。
你可以根据自己的需求来修改这个示例代码,例如修改上传图片的 API 地址、支持上传多张图片、限制上传文件的数量等。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![mp4](https://img-home.csdnimg.cn/images/20210720083504.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)