Element plus实现图片上传以及单选框的vue界面,给出代码
时间: 2024-01-07 15:06:15 浏览: 85
以下是使用 Element Plus 实现图片上传和单选框的 Vue 代码示例:
```vue
<template>
<div>
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="图片上传">
<el-upload
class="upload-demo"
action="/api/upload"
:on-success="handleUploadSuccess"
:before-upload="beforeUpload"
:limit="1"
:file-list="fileList"
list-type="picture-card"
:auto-upload="false"
>
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
<el-form-item label="单选框">
<el-radio-group v-model="form.radio">
<el-radio :label="1">选项1</el-radio>
<el-radio :label="2">选项2</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<el-button type="primary" @click="submitForm">提交</el-button>
</div>
</template>
<script>
export default {
data() {
return {
form: {
radio: 1, // 单选框默认值
},
fileList: [], // 图片上传列表
};
},
methods: {
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG && !isPNG) {
this.$message.error('只能上传 JPG/PNG 格式的图片');
}
if (!isLt2M) {
this.$message.error('图片大小不能超过 2MB');
}
return isJPG || isPNG && isLt2M;
},
handleUploadSuccess(res, file) {
this.form.imageUrl = URL.createObjectURL(file.raw);
this.fileList.push({
name: file.name,
url: URL.createObjectURL(file.raw),
});
},
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
console.log(this.form);
} else {
console.log('表单验证失败');
return false;
}
});
},
},
};
</script>
```
需要注意的是,在使用 Element Plus 的 Upload 组件上传图片时,需要设置 `:auto-upload="false"` 属性,防止自动上传,而是在上传按钮点击时再进行上传。另外,需要自定义 `beforeUpload` 方法来限制上传的文件类型和大小,并且在上传成功后将图片缩略图添加到 `fileList` 列表中,以便在界面上显示已上传的图片。
阅读全文