vue实现上传图片和显示图片
上传图片并显示点击上传文件的input的时候,将图片上传到页面上,并且显示已经上传的图片,同时也可以保存到后台// 因为input的上传按钮,会显示的比较突兀,所以在点击div的时候判断是否存在了上传文件的input,如果没有的话就新建一个上传文件的控件,且隐藏起来,不会占据页面位置,在change的时候将文件的数据获取到并传到页面的img里面,实现类似vue-element的文件上传的效果//实
·
上传图片并显示
点击上传文件的input的时候,将图片上传到页面上,并且显示已经上传的图片,同时也可以保存到后台
// 因为input的上传按钮,会显示的比较突兀,所以在点击div的时候判断是否存在了上传文件的input,如果没有的话就新建一个上传文件的控件,且隐藏起来,不会占据页面位置,在change的时候将文件的数据获取到并传到页面的img里面,实现类似vue-element的文件上传的效果
//实现代码
<template>
<div class="alert-box-item">
<div class="bigImg-div" @click="toGetImg">
<img class="bigImg" :src=valueUrl v-if="valueUrl">
</div>
</div>
</template>
<script>
let inputElement = null
export default {
data() {
return {
valueUrl: ''
}
},
methods: {
toGetImg() {
if (inputElement === null) {
// 生成文件上传的控件
inputElement = document.createElement('input')
inputElement.setAttribute('type', 'file')
inputElement.style.display = 'none'
if (window.addEventListener) {
inputElement.addEventListener('change', this.uploadFile, false)
} else {
inputElement.attachEvent('onchange', this.uploadFile)
}
document.body.appendChild(inputElement)
}
inputElement.click()
},
uploadFile(el) {
if (el && el.target && el.target.files && el.target.files.length > 0) {
console.log(el)
const files = el.target.files[0]
const isLt2M = files.size / 1024 / 1024 < 2
const size = files.size / 1024 / 1024
console.log(size)
// 判断上传文件的大小
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
} else if (files.type.indexOf('image') === -1) { //如果不是图片格式
// this.$dialog.toast({ mes: '请选择图片文件' });
this.$message.error('请选择图片文件');
} else {
const that = this;
const reader = new FileReader(); // 创建读取文件对象
reader.readAsDataURL(el.target.files[0]); // 发起异步请求,读取文件
reader.onload = function() { // 文件读取完成后
// 读取完成后,将结果赋值给img的src
that.valueUrl = this.result;
console.log(this.result);
// 数据传到后台
//const formData = new FormData()
//formData.append('file', files); // 可以传到后台的数据
};
}
}
}
},
beforeDestroy() {
if (inputElement) {
if (window.addEventListener) {
inputElement.removeEventListener('change', this.onGetLocalFile, false)
} else {
inputElement.detachEvent('onchange', this.onGetLocalFile)
}
document.body.removeChild(inputElement)
inputElement = null
console.log('========inputelement destroy')
}
}
}
</script>
<style>
.alert-box-item {
overflow: hidden;
}
.bigImg-div {
width: 200px;
height: 200px;
border-radius: 100%;
overflow: hidden;
border: 1px solid #ddd;
}
.bigImg {
display: block;
width: 200px;
height: 200px;
border-radius: 100%;
}
</style>
图片:
上传的文件
更多推荐
已为社区贡献10条内容
所有评论(0)