vue實(shí)現(xiàn)圖片上傳預(yù)覽功能
本文實(shí)例為大家分享了vue實(shí)現(xiàn)圖片上傳預(yù)覽的具體代碼,供大家參考,具體內(nèi)容如下
效果圖
html結(jié)構(gòu)
<ul class="gallery-window-map" style="flex-wrap:wrap;"> <!--點(diǎn)擊上傳按鈕--> <li class="house-pic-item" v-if="!(!item.isNew&&editBtnType[index])" @click="houseUpload(index)"> <div class="pic-box"> <span class="iconfont icon-zengjia"></span> <h5 class="btn-tit">點(diǎn)擊上傳</h5> </div> </li> <!--展示區(qū)域--> <viewer :images="item.imgUrl"> <li class="house-pic-item" v-for="(picItem, picIndex) in item.imgUrl" :key="picIndex"> <img :src="picItem" alt="" :key="picItem" width="120" height="90" :ref="'showImg_'+index"> <div class="mask"> <div class="ico-box"> <span class="font-btn" @click="clickWatchImg('showImg_'+index,picIndex)"> <i class="iconfont icon-fangda"></i> </span> <span class="font-btn" v-if="!(!item.isNew&&editBtnType[index])" @click="delHouseImage(index,picIndex)"> <i class="iconfont icon-shanchu"></i> <i class="line"></i> </span> </div> </div> </li> </viewer> </ul>
css樣式
.gallery-window-map{ display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 10px; } .house-pic-item { position: relative; display: inline-block; margin-right: 13px; width: 120px; height: 90px; background-color: #e3e3e3; } .pic-box { width: 100%; text-align: center; } .icon-zengjia { position: relative; top: 12px; font-size: 26px; color: #b2b2b2; } .btn-tit { height: 38px; line-height: 38px; font-size: 12px; color: #999; } .mask { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(34, 34, 34, 0.6); } .font-btn { display: inline-block; height: 40px; width: 50%; padding: 0 20px; -webkit-box-sizing: border-box; box-sizing: border-box; } .font-btn:last-child { position: relative; } .icon-fangda, .icon-shanchu { font-size: 22px; color: #fff; } .line { content: ''; display: inline-block; position: absolute; left: 0; top: 10px; width: 1px; height: 20px; background: #fff; }
/** * 模擬點(diǎn)擊上傳圖片按鈕 * @index 當(dāng)前操作的戶型box的索引 */ houseUpload(index) { this.$refs.houseTypeLoad[index].click() }, /** * 上傳圖片到服務(wù)器 * @index 當(dāng)前操作的戶型box的索引 */ upLoadHouse(e, index) { let _that = this const file = e.target.files[0] if (!file) { return } new ImageCompressor(file, { quality: 0.9, maxWidth: 2000, maxHeight: 2000, success(result) { // debugger const formData = new FormData() formData.append('file', result, result.name) formData.append('watermark', false) // Send the compressed image file to server with XMLHttpRequest. if (result.size > 1 * 1024 * 1024 || result.size < 3 * 1024) { _that.$message('圖片大小要在3K~1M之間') return } else { _that.$ajax.post('/img/upload', formData).then(res => { res = res.data if (res.images && res.images.length > 0) { if (res.images[0].src !== 'file size is too small') { let item = res.images[0].src console.log(item) _that.houseTypeForm[index].imgUrl.unshift(item) } } }) } }, error(e) { console.log(e.message) } }) }, /** * 打開圖片查看器 */ clickWatchImg(str, picIndex) { console.log('=================') console.log(picIndex) console.log(this.$refs[str][picIndex]) this.$refs[str][picIndex].click() }, /** * 刪除指定圖片,操作表單數(shù)據(jù) * @index 當(dāng)前操作的戶型box的索引 * @picIndex 當(dāng)前操作的圖片索引 */ delHouseImage(index, picIndex) { this.houseTypeForm[index].imgUrl.splice(picIndex, 1) },
關(guān)于vue.js組件的教程,請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
更多vue學(xué)習(xí)教程請(qǐng)閱讀專題《vue實(shí)戰(zhàn)教程》
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持我們。
上一篇:Jquery屬性的獲取/設(shè)置及樣式添加/刪除操作技巧分析
欄 目:JavaScript
下一篇:詳解vue-router 動(dòng)態(tài)路由下子頁(yè)面多頁(yè)共活的解決方案
本文標(biāo)題:vue實(shí)現(xiàn)圖片上傳預(yù)覽功能
本文地址:http://mengdiqiu.com.cn/a1/JavaScript/9424.html
您可能感興趣的文章
- 04-02java后端代碼分頁(yè) java后端實(shí)現(xiàn)分頁(yè)page
- 01-10Echarts實(shí)現(xiàn)單條折線可拖拽效果
- 01-10在Vue項(xiàng)目中使用Typescript的實(shí)現(xiàn)
- 01-10js實(shí)現(xiàn)上傳圖片并顯示圖片名稱
- 01-10Vue中使用Lodop插件實(shí)現(xiàn)打印功能的簡(jiǎn)單方法
- 01-10echarts實(shí)現(xiàn)折線圖的拖拽效果
- 01-10d3.js實(shí)現(xiàn)圖形縮放平移
- 01-10小程序簡(jiǎn)單兩欄瀑布流效果的實(shí)現(xiàn)
- 01-10微信小程序批量上傳圖片到七牛(推薦)
- 01-10H5實(shí)現(xiàn)手機(jī)拍照和選擇上傳功能


閱讀排行
- 1C語(yǔ)言 while語(yǔ)句的用法詳解
- 2java 實(shí)現(xiàn)簡(jiǎn)單圣誕樹的示例代碼(圣誕
- 3利用C語(yǔ)言實(shí)現(xiàn)“百馬百擔(dān)”問題方法
- 4C語(yǔ)言中計(jì)算正弦的相關(guān)函數(shù)總結(jié)
- 5c語(yǔ)言計(jì)算三角形面積代碼
- 6什么是 WSH(腳本宿主)的詳細(xì)解釋
- 7C++ 中隨機(jī)函數(shù)random函數(shù)的使用方法
- 8正則表達(dá)式匹配各種特殊字符
- 9C語(yǔ)言十進(jìn)制轉(zhuǎn)二進(jìn)制代碼實(shí)例
- 10C語(yǔ)言查找數(shù)組里數(shù)字重復(fù)次數(shù)的方法
本欄相關(guān)
- 04-02javascript點(diǎn)線,點(diǎn)線的代碼
- 04-02javascript潛力,javascript強(qiáng)大嗎
- 04-02javascript替換字符串,js字符串的替換
- 04-02javascript移出,js 移入移出
- 04-02包含javascript舍的詞條
- 04-02javascript并行,深入理解并行編程 豆瓣
- 04-02javascript匿名,js匿名方法
- 04-02javascript警報(bào),JavaScript警告
- 04-02javascript遮蓋,JavaScript遮蓋PC端頁(yè)面
- 04-02javascript前身,javascript的前身
隨機(jī)閱讀
- 01-11ajax實(shí)現(xiàn)頁(yè)面的局部加載
- 04-02jquery與jsp,用jquery
- 01-10使用C語(yǔ)言求解撲克牌的順子及n個(gè)骰子
- 08-05織夢(mèng)dedecms什么時(shí)候用欄目交叉功能?
- 08-05DEDE織夢(mèng)data目錄下的sessions文件夾有什
- 01-10delphi制作wav文件的方法
- 08-05dedecms(織夢(mèng))副欄目數(shù)量限制代碼修改
- 01-10C#中split用法實(shí)例總結(jié)
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置