标签：vue res ali line height nload ret get 覆盖
1.在前端中使用input框，type=”file“来实现选择文件夹的功能
在表单中的input框中的添加按钮
<el-form-item label="产品图片" prop="picture" style="position:relative"> <el-input v-model="form1.picture" placeholder="图片大小为200x200" style="width:85%"></el-input> <div class="replace">上传</div> <input type="file" class="file" ref="files" @change="getImages" /> </el-form-item>
2.input中type="type"的样式很难调整，可以采用重写样式覆盖，让input的opacity:0
.file { position: absolute; width: 6%; padding: 4%; right: 0; top: 0; opacity: 0; } .replace { position: absolute; right: 0; top: 0; width: 7.5%; padding: 3.7%; text-align: center; font-size: 13px; line-height: 5px; border: 1px solid #ooo; }
3.在js中写入fileReader
getImages(e) { let _this = this; _this.form1.picture = e.target.files[0].name; console.log(e.target.files); if (!e || !window.FileReader) return; // 看支持不支持FileReader let reader = new FileReader(); reader.readAsDataURL(e.target.files[0]); reader.onloadend = function(){ _this.src1 = this.result; }; },
标签：vue res ali line height nload ret get 覆盖
原文地址：https://www.cnblogs.com/xiaoyiyiaixuexi/p/13207206.html
