vue使用原生<input type=‘file‘/>上傳圖片並顯示縮圖
阿新 • • 發佈:2021-02-03
效果圖:
html程式碼:
<div class="uploader">
<input
type="file"
class="fonts"
name=""
@change="afterRead"
ref="updata"
accept="image/*"
id="upload"
/>
</div>
<label for="upload">
<div class="laber-up">
<div v-show="src"><img :src="src" alt="" srcset="" /></div>
<div v-show="!src" ><van-icon name ="plus" />
<p><span class="step-color">點選</span>上傳身份證</p>
</div>
</div>
</label>
css程式碼:
/* 圖片上傳 */
.uploader {
display: none;
}
.laber-up {
width: 100%;
height: 3.5rem;
/* background: skyblue; */
margin-bottom : 0.4rem;
}
.laber-up>div{
width: 100%;
height: 100%;
border: 1px solid #00f;
border-radius: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #ccc;
position: relative;
}
.laber-up>div>p{
font-size: 0.4rem;
position: absolute;
top: 2.6rem;
color: #333;
}
.laber-up>div>img{
height: 100%;
}
.delog{
text-align: right;
}
js程式碼:
<script>
export default {
data() {
return {
src: "",
};
},
methods: {
afterRead() {
let that = this;
let file = this.$refs.updata.files[0];
// console.log(file);
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
// console.log(e);
that.src = this.result;//顯示縮圖
// console.log(this.result);
};
},
},
};
</script>