标签: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