标签：ati put font 研究 项目 多图 htm 调用 选择图片
最近自己想做一个项目，涉及到很多图片上传和预览的功能，所以简单记录下：
先用input[type=file]来获取本地的图片，然后用HTML5的 File API 的 FileReader 图片本地转成base64格式的url，把这个url赋值到用于预览的src就好了。 <div class="upload">
<div class="img-container">
<img :src="src" alt="user image" height="100%" width="100%">
</div>
<input type="file" @change="getFile" ref="file" id="file">
<label for="file"><i class="el-icon-plus"></i></label>
</div>
input的type=file的样式很丑，所以需要改下，通常采用label for然后改label的样式
.upload {
.img-container{
width 100px
height 100px
}
label {
width: 100px;
height:100px;
display:inline-block;
border-radius: 2px;
text-align: center;
font-size: 30px;
border:2px solid #ddd;
i{
line-height 100px
}
}
}
input[type=‘file‘] {
display: none;
}
我给图片先默认显示一个图片
data(){
return {// 转base64码后的data字段
src: ‘../../../static/image/dl.jpg‘ //先设置一个默认图片
}
},
默认图片效果：
然后点击选择图片，调用方法：
methods:{
getFile (e) {
let _this = this
var files = e.target.files[0]
if (!e || !window.FileReader) return // 看支持不支持FileReader
let reader = new FileReader()
reader.readAsDataURL(files) // 这里是最关键的一步，转换就在这里
reader.onloadend = function () {
_this.src = this.result
}
}
}
比较简单，上面只是预览，改了下样式，还有上次服务器，还有比如压缩图片大小，这几天会慢慢研究。
标签：ati put font 研究 项目 多图 htm 调用 选择图片
原文地址：https://www.cnblogs.com/goloving/p/9231894.html
