html选中图片自动提交表单提交表单提交,表单中提交可选择的图片上传【el-radio+v-img】...

1.新增图片：单选按钮+图片展示

2.主要进行样式调整，代码如下：

.radioImg .el-radio__input {

display: none;

}

.radioImg .el-radio__inner {

display: none;

}

.radioImg .el-radio .is-bordered {

padding: 0px;

}

.radioImg .v-image {

border-radius: 4px;

}

.radioImg .el-radio {

margin: 10px;

}

.radioImg .el-radio__label div {

margin:-26px 0px 0px -10px;

}

.radioImg .el-radio__label .v-image__image {

margin:0;

}

.radioImg .el-radio.is-bordered + .el-radio.is-bordered {

margin: 10px;

}

3.获取icon列表展示代码：【注意后端给的是二进制流图片，需要前面加上字符串"data:image/png;base64," 才能展示成功】

//获取icon列表

async getIcon() {

let { data }=await getIcon()for(let item of data) {for(let [key, val] of Object.entries(item)) {

let obj={

name: key,

icon:"data:image/png;base64," +val

}this.iconList.push(obj)

}

}}

4.最后保存成功后列表里展示图片

展示代码如下：

原文：https://www.cnblogs.com/jiazhi88/p/12659761.html