标签:height splay erro split css hidden 单位 label border
做法:
本地图片上传后,把上传的图片转为base64,和表单数据一起提交
成品:

<el-form-item label="公司LOGO" prop="url">
<el-image
v-if="this.isDisabled"
style="width: 114px; height: 114px"
:src="formShow.logoImg"
class="img-avatar"
fit="fill"
>
<div slot="error" class="image-slot">暂无</div>
</el-image>
<div v-else>
<div class="avatar-uploader" @click="uploadFile">
<div class="el-upload el-upload--text">
<img v-if="formShow.logoImg" :src="formShow.logoImg" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<input
@change="onFileChange"
type="file"
id="upload"
name="file"
class="el-upload__input"
/>
</div>
</div>
</div>
</el-form-item>
blobToDataURL(blob, cb) {
let reader = new FileReader();
reader.onload = function(evt) {
var base64 = evt.target.result;
cb(base64);
};
reader.readAsDataURL(blob);
},
onFileChange(e) {
let type = e.target.files[0].type.split("/")[1];
const file = e.target.files[0];
if (file === undefined) {
return;
}
const result = /(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(type);
if (result && file.size<=100*1024) {
this.blobToDataURL(e.target.files[0], res => {
this.formShow.logoImg = res;
});
this.isUploaded = true;
document.getElementById("upload").value = null;
} else if(file.size>100*1024) {
this.$message.error("上传图片不能超过100k,请重新上传")
}else{
this.$message.error("图片类型必须是.gif,jpeg,jpg,png中的一种");
}
},
uploadFile() {
document.getElementById("upload").click();
},
css 代码:
标签:height splay erro split css hidden 单位 label border
原文地址:https://www.cnblogs.com/zmdblog/p/12567824.html