Vue2.0 實現(xiàn)移動端圖片上傳功能
本文主要介紹VUE2.0圖片上傳功能的實現(xiàn)。原理是通過js控制和input標(biāo)簽的方式完成這一效果,無需加載其他組件。
效果圖如下:
1.DOM代碼
1.1input標(biāo)簽
由于我們是通過input標(biāo)簽的方式進(jìn)行圖片上傳的,但是input標(biāo)簽的樣式有點丑,所以我們隱藏該樣式display: none
<input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/>
1.2添加圖片按鈕
如果需要用到此方法,只需要在你的上傳按鈕的地方調(diào)用@click=”chooseType”即可,其他部分代碼為樣式布局僅供參考。
<div class="add" @click="chooseType"> <div class="add-image" align="center"> <i class="icon-camera"></i> //按鈕中的圖片是一個icon字體圖標(biāo) <p class="font13">添加圖片</p> </div> </div>
1.3圖片預(yù)覽區(qū)域
如果需要用到此方法,只需要在你的預(yù)覽區(qū)域進(jìn)行v-for循環(huán)輸出上傳的圖片集合即可。
<div class="add-img" v-show="imgList.length"> <p class="font14">圖片(最多6張,還可上傳<span v-text="6-imgList.length"></span>張)</p> <ul class="img-list"> <li v-for="(url,index) in imgList"> <img class="del" src="../../assets/img/home/btn_clean.png" @click.stop="delImg(index)"/> //del刪除樣式,icon字體圖標(biāo)需要自己找哦 <img :src="url.file.src"> </li> </ul> </div>
1.4圖片預(yù)覽區(qū)域-拓展(1.3為簡單運用,如果有時間后續(xù)會將完整的案例上傳)
如果需要用到此方法,只需要在你的預(yù)覽區(qū)域進(jìn)行v-for循環(huán)輸出上傳的圖片集合即可。本案例還運用的Y-DUI的lightbox組件,如有需要請參照圖片預(yù)覽的調(diào)用方式。此處,也調(diào)用了vue的懶加載和css背景圖自適應(yīng)的方法。
<div class="add-img" v-show="imgList.length"> <p class="font14">圖片(最多6張,還可上傳<span v-text="6-imgList.length"></span>張)</p> <ul class="img-list"> <li v-for="(url,index) in imgList"> <img class="del" src="../../assets/img/home/btn_clean.png" @click.stop="delImg(index)"/> <yd-lightbox> <div class="app-bg"> <yd-lightbox-img class="app-bg" :original="url.file.src" v-lazy:background-image="{src: url.file.src, error: require('../../assets/img/common/img_placeholder400.png'), loading: require('../../assets/img/common/img_placeholder400.png')}"></yd-lightbox-img> </div> </yd-lightbox> </li> </ul> </div>
2.JS代碼塊
tips:此處的提示彈窗調(diào)用的Y-DUI的提示框,可以改成自己的提示框。
<script> export default { name: "Feedback", data() { return { showFace: false, imgList: [], size: 0, limit:6, //限制圖片上傳的數(shù)量 tempImgs:[] } }, methods: { chooseType() { document.getElementById('upload_file').click(); }, fileChange(el) { if (!el.target.files[0].size) return; this.fileList(el.target); el.target.value = '' }, fileList(fileList) { let files = fileList.files; for (let i = 0; i < files.length; i++) { //判斷是否為文件夾 if (files[i].type != '') { this.fileAdd(files[i]); } else { //文件夾處理 this.folders(fileList.items[i]); } } }, //文件夾處理 folders(files) { let _this = this; //判斷是否為原生file if (files.kind) { files = files.webkitGetAsEntry(); } files.createReader().readEntries(function (file) { for (let i = 0; i < file.length; i++) { if (file[i].isFile) { _this.foldersAdd(file[i]); } else { _this.folders(file[i]); } } }); }, foldersAdd(entry) { let _this = this; entry.file(function (file) { _this.fileAdd(file) }) }, fileAdd(file) { if (this.limit !== undefined) this.limit--; if (this.limit !== undefined && this.limit < 0) return; //總大小 this.size = this.size + file.size; //判斷是否為圖片文件 if (file.type.indexOf('image') == -1) { this.$dialog.toast({mes: '請選擇圖片文件'}); } else { let reader = new FileReader(); let image = new Image(); let _this = this; reader.readAsDataURL(file); reader.onload = function () { file.src = this.result; image.onload = function(){ let width = image.width; let height = image.height; file.width = width; file.height = height; _this.imgList.push({ file }); console.log( _this.imgList); }; image.src= file.src; } } }, delImg(index) { this.size = this.size - this.imgList[index].file.size;//總大小 this.imgList.splice(index, 1); if (this.limit !== undefined) this.limit = 6-this.imgList.length; }, displayImg() { } } } </script>
3.CSS樣式代碼塊,僅供參考
太太懶了,沒有一一區(qū)分
.app-bg >>>img{ width: 100%; height: 100%; -webkit-transform: scale(1.03); -moz-transform: scale(1.03); -ms-transform: scale(1.03); -o-transform: scale(1.03); transform: scale(1.03); } textarea { padding: 10px; } .text-length { font-size: 14px; z-index: 999; width: 100%; text-align: right; margin-bottom: 10px; color: #e4e4e4; } .warning { color: #fe9900; } .add-img { width: 100%; padding: 10px; } .add-img p { color: #999; } .mui-content { padding-bottom: 60px; } .mui-content .idea { margin-top: 8px; background-color: #FFFFFF; } .good-item { text-align: center; width: 33%; max-width: 100%; overflow: hidden; padding-right: 10px; padding-bottom: 10px; float: left; } .good-item span { font-size: 15px; height: 30px; line-height: 30px; border-radius: 50px; display: block; width: 100%; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 1px solid #CCCCCC; } .mui-table { padding-top: 10px; color: #333; padding-left: calc(0.5% + 10px); } .h-line-behind { line-height: 40px; padding-left: 10px; } .question { border: 0; margin-bottom: 10px; } .add { display: inline-block; margin-bottom: 20px; } .add-image { padding-top: 15px; margin-left: 10px; width: 80px; top: 20px; height: 80px; border: 1px dashed rgba(0, 0, 0, .2); } .add-image .icon-camera { font-size: 24px; } .good-item .choose { color: #fff; background-color: #87582E; color: #FFF; border: 0; } .mui-btn-block { border: 0; border-radius: 0; background-color: #87582E; color: #fff; margin-bottom: 0; bottom: 0; } .mui-buttom { position: fixed; width: 100%; bottom: 0; z-index: 999; } /*九宮格*/ .img-list { overflow: hidden; } .img-list > li { float: left; width: 32%; text-align: center; padding-top: 31%; margin-left: 1%; margin-top: 1%; position: relative; } .img-list > li > div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .img-list > li > div .app-bg { width: 100%; height: 100%; } .mui-fullscreen { z-index: 9999; } .del { position: absolute; width: 18px; top: 0; right: 0; z-index: 999 }
總結(jié)
以上所述是小編給大家介紹的Vue2.0 移動端圖片上傳功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
Vue3利用組合式函數(shù)和Shared Worker實現(xiàn)后臺分片上傳
這篇文章主要為大家詳細(xì)介紹了Vue3如何利用組合式函數(shù)和Shared Worker實現(xiàn)后臺分片上傳(帶哈希計算),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10vue?大文件分片上傳(斷點續(xù)傳、并發(fā)上傳、秒傳)
本文主要介紹了vue?大文件分片上傳,主要包括斷點續(xù)傳、并發(fā)上傳、秒傳,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07Vue在chrome44偶現(xiàn)點擊子元素事件無法冒泡的解決方法
這篇文章主要給大家介紹了關(guān)于Vue在chrome44偶現(xiàn)點擊子元素事件無法冒泡的解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12vuejs+element-ui+laravel5.4上傳文件的示例代碼
本篇文章主要介紹了vuejs+element-ui+laravel5.4上傳文件的示例代碼,具有一定的參考價值,有興趣的可以了解一下2017-08-08vue form check 表單驗證的實現(xiàn)代碼
這篇文章主要介紹了vue form check 表單驗證的實現(xiàn)代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-12-12element-ui upload組件上傳文件類型限制問題小結(jié)
最近我遇到這樣的問題,接受類型已經(jīng)加了accept 但是當(dāng)選擇彈出本地選擇文件時候切換到所有文件 之前的文件類型就本根過濾不掉了,下面小編給大家介紹element-ui upload組件上傳文件類型限制問題小結(jié),感興趣的朋友一起看看吧2024-02-02Vue啟動失敗報錯:Module?not?found:?Error:?Can‘t?resolve?&apos
這篇文章主要給大家介紹了關(guān)于Vue啟動失敗報錯:Module?not?found:?Error:?Can‘t?resolve?'less-loader'解決的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03