vue如何实现上传图片和显示图片
作者:鸣拙
这篇文章主要介绍了vue如何实现上传图片和显示图片问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue上传图片和显示图片
上传图片并显示
点击上传文件的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>
图片:
上传的文件
vue上传图片并实时显示
<div class="line-two" :style="driver ? 'display: none': ''"> <div class="line-two-one" <div class="showImgContent"> <img :src="imgSrc" alt=""> </div> <input type="file" title="请选择图片" @change="imgChange"> </div> <div class="posts-text"> <textarea v-model="textArea" placeholder="优美的文案" rows="4" cols="83"></textarea> </div> <div class="sendPosts"> <button @click="addNewPostss">发布</button> </div> </div>
let formData = new FormData() let textArea = ref() const imgSrc = ref() const imgChange = (e) => { /*console.log(e.target.files);*/ let fr = new FileReader() fr.onload = function() { /*console.log("fr.result",fr.result);*/ imgSrc.value = fr.result /*console.log(imgSrc.value);*/ } fr.readAsDataURL(e.target.files[0]); Array.from(e.target.files).map(item => { formData.append("file", item) }) console.log("formData.getAll", formData.getAll("file")); }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。