vue如何實(shí)現(xiàn)上傳圖片和顯示圖片
vue上傳圖片和顯示圖片
上傳圖片并顯示
點(diǎn)擊上傳文件的input的時(shí)候,將圖片上傳到頁(yè)面上,并且顯示已經(jīng)上傳的圖片,同時(shí)也可以保存到后臺(tái)
// 因?yàn)閕nput的上傳按鈕,會(huì)顯示的比較突兀,所以在點(diǎn)擊div的時(shí)候判斷是否存在了上傳文件的input,如果沒(méi)有的話就新建一個(gè)上傳文件的控件,且隱藏起來(lái),不會(huì)占據(jù)頁(yè)面位置,在change的時(shí)候?qū)⑽募臄?shù)據(jù)獲取到并傳到頁(yè)面的img里面,實(shí)現(xiàn)類似vue-element的文件上傳的效果 //實(shí)現(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('上傳頭像圖片大小不能超過(guò) 2MB!') } else if (files.type.indexOf('image') === -1) { //如果不是圖片格式 // this.$dialog.toast({ mes: '請(qǐng)選擇圖片文件' }); this.$message.error('請(qǐng)選擇圖片文件'); } else { const that = this; const reader = new FileReader(); // 創(chuàng)建讀取文件對(duì)象 reader.readAsDataURL(el.target.files[0]); // 發(fā)起異步請(qǐng)求,讀取文件 reader.onload = function() { // 文件讀取完成后 // 讀取完成后,將結(jié)果賦值給img的src that.valueUrl = this.result; console.log(this.result); // 數(shù)據(jù)傳到后臺(tái) //const formData = new FormData() //formData.append('file', files); // 可以傳到后臺(tái)的數(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上傳圖片并實(shí)時(shí)顯示
<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="請(qǐng)選擇圖片" @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")); }
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3-print-nb實(shí)現(xiàn)頁(yè)面打印(含分頁(yè)打印)示例代碼
大多數(shù)后臺(tái)系統(tǒng)中都存在打印的需求,在有打印需求時(shí),對(duì)前端來(lái)說(shuō)當(dāng)然是直接打印頁(yè)面更容易,下面這篇文章主要給大家介紹了關(guān)于vue3-print-nb實(shí)現(xiàn)頁(yè)面打印(含分頁(yè)打印)的相關(guān)資料,需要的朋友可以參考下2024-01-01vue實(shí)現(xiàn)兩個(gè)組件之間數(shù)據(jù)共享和修改操作
這篇文章主要介紹了vue實(shí)現(xiàn)兩個(gè)組件之間數(shù)據(jù)共享和修改操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11Vue實(shí)現(xiàn)的父組件向子組件傳值功能示例
這篇文章主要介紹了Vue實(shí)現(xiàn)的父組件向子組件傳值功能,結(jié)合完整實(shí)例形式簡(jiǎn)單分析了vue.js組件傳值的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01100行代碼實(shí)現(xiàn)一個(gè)vue分頁(yè)組功能
今天用vue來(lái)實(shí)現(xiàn)一個(gè)分頁(yè)組件,總體來(lái)說(shuō),vue實(shí)現(xiàn)比較簡(jiǎn)單,樣式部分模仿了elementUI。接下來(lái)本文通過(guò)實(shí)例代碼給大家介紹100行代碼實(shí)現(xiàn)一個(gè)vue分頁(yè)組功能,感興趣的朋友跟隨小編一起看看吧2018-11-11Vue頁(yè)面跳轉(zhuǎn)傳遞參數(shù)及接收方式
這篇文章主要介紹了Vue頁(yè)面跳轉(zhuǎn)傳遞參數(shù)及接收方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09vue中優(yōu)雅實(shí)現(xiàn)數(shù)字遞增特效的詳細(xì)過(guò)程
項(xiàng)目中需要做數(shù)字滾動(dòng)增加的效果,一開(kāi)始很懵,研究了一下原理,發(fā)現(xiàn)很簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于vue中優(yōu)雅實(shí)現(xiàn)數(shù)字遞增特效的詳細(xì)過(guò)程,需要的朋友可以參考下2022-12-12Vue精美簡(jiǎn)潔登錄頁(yè)完整代碼實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue精美簡(jiǎn)潔登錄頁(yè)完整代碼的相關(guān)資料,通過(guò)文中的方法大家可以使用實(shí)現(xiàn)簡(jiǎn)單的用戶登錄界面,下面通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07