這次做了vue頁面的圖片上傳功能,不帶裁剪功能的!
創(chuàng)新互聯(lián)堅持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:成都網(wǎng)站設(shè)計、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時代的青岡網(wǎng)站設(shè)計、移動媒體設(shè)計的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
首先是html代碼,在input框上添加change事件,如下:
<ul class="clearfix"> <li v-if="imgs.length>0" v-for='(item ,index ) in imgs'> <img :src="item"> </li> <li v-if="imgs.length>=6 ? false : true"> <img src="../../assets/img/addimg.png"><input class="upload" @change='add_img' type="file"> </li> </ul>
我這里做了圖片數(shù)量的限制,最多6張。
然后是data數(shù)據(jù),如下:
data () { return { imgs: [], imgData: { accept: 'image/gif, image/jpeg, image/png, image/jpg', } } }
imgs數(shù)組是放圖片路徑的,頁面顯示圖片就是循環(huán)這個數(shù)組,imgData是判斷圖片類型的。
接下來是最重要的methods里面的方法,具體如下:
add_img(event){ let reader =new FileReader(); let img1=event.target.files[0]; let type=img1.type;//文件的類型,判斷是否是圖片 let size=img1.size;//文件的大小,判斷圖片的大小 if(this.imgData.accept.indexOf(type) == -1){ alert('請選擇我們支持的圖片格式!'); return false; } if(size>3145728){ alert('請選擇3M以內(nèi)的圖片!'); return false; } var uri = '' let form = new FormData(); form.append('file',img1,img1.name); this.$http.post('/file/upload',form,{ headers:{'Content-Type':'multipart/form-data'} }).then(response => { console.log(response.data) uri = response.data.url reader.readAsDataURL(img1); var that=this; reader.onloadend=function(){ that.imgs.push(uri); } }).catch(error => { alert('上傳圖片出錯!'); }) },
首先是獲取你選擇的圖片,判斷圖片的類型和大小,然后以form表單的形式提交到后臺,后臺會返回給你這個圖片的線上路徑,你把后臺返回的圖片路徑push到圖片數(shù)組里面就可以了。
一般情況下還有刪除圖片的方法,就是把圖片數(shù)組里的那個路徑刪除掉,把數(shù)據(jù)提交到后臺,告訴后臺刪除了哪張圖片就可以了。
以上所述是小編給大家介紹的vue 圖片上傳功能詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!
當(dāng)前名稱:詳解vue圖片上傳功能
標(biāo)題路徑:http://sd-ha.com/article34/gdeese.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供搜索引擎優(yōu)化、微信公眾號、、網(wǎng)站改版、定制開發(fā)、自適應(yīng)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)