vue如何實現(xiàn)上傳圖片和顯示圖片

更新時間：2023年10月16日 15:52:55 作者：鳴拙

這篇文章主要介紹了vue如何實現(xiàn)上傳圖片和顯示圖片問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue上傳圖片和顯示圖片

上傳圖片并顯示

在這里插入圖片描述

點擊上傳文件的input的時候，將圖片上傳到頁面上，并且顯示已經(jīng)上傳的圖片，同時也可以保存到后臺

// 因為input的上傳按鈕，會顯示的比較突兀，所以在點擊div的時候判斷是否存在了上傳文件的input，如果沒有的話就新建一個上傳文件的控件，且隱藏起來，不會占據(jù)頁面位置，在change的時候?qū)⑽募臄?shù)據(jù)獲取到并傳到頁面的img里面，實現(xiàn)類似vue-element的文件上傳的效果
//實現(xiàn)代碼
<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(); // 創(chuàng)建讀取文件對象
						reader.readAsDataURL(el.target.files[0]); // 發(fā)起異步請求，讀取文件
						reader.onload = function() { // 文件讀取完成后
							// 讀取完成后，將結(jié)果賦值給img的src
							that.valueUrl = this.result;
							console.log(this.result);
							// 數(shù)據(jù)傳到后臺
						//const formData = new FormData()
						//formData.append('file', files); // 可以傳到后臺的數(shù)據(jù)
						};
					}
				}
			}

		},
		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="優(yōu)美的文案" rows="4" cols="83"></textarea>            
    </div>
    <div class="sendPosts">
    <button @click="addNewPostss">發(fā)布</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"));
            }