记录一下在用vue写项目时所遇到的坑。
用fileReader技术上传图片
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>
<divclass="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;// 看支持不支持FileReaderlet reader =new FileReader();
reader.readAsDataURL(e.target.files[0]);
reader.onloadend = function(){
_this.src1 =this.result;
};
},
