這篇文章將為大家詳細(xì)講解有關(guān)使用vue構(gòu)建一個(gè)上傳圖片表單的方法,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
專注于為中小企業(yè)提供網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)萬年免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動(dòng)了近1000家企業(yè)的穩(wěn)健成長(zhǎng),幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫,Vue允許可以將一個(gè)網(wǎng)頁分割成可復(fù)用的組件,每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript,以用來渲染網(wǎng)頁中相應(yīng)的地方,所以越來越多的前端開發(fā)者使用vue。
這篇博客也不知道起個(gè)什么名字比較好,畢竟剛開始學(xué)習(xí)vue,很多還不是很熟悉,一直在慢慢摸索中;之前也習(xí)慣了用jQuery寫js代碼,思維邏輯也要有個(gè)轉(zhuǎn)換的過程。
1. 轉(zhuǎn)變思維
使用vue編寫代碼,首先要做的就是轉(zhuǎn)換思維,vue是一個(gè)數(shù)據(jù)驅(qū)動(dòng)的框架,我們只需要操作數(shù)據(jù),數(shù)據(jù)變化后,vue會(huì)自動(dòng)改變DOM結(jié)構(gòu),而jQuery是直接操作DOM的。比如剛開始寫的代碼中犯的錯(cuò)誤,有一個(gè)頁面中的input標(biāo)簽是并列多個(gè)的,而且name屬性的值是自增的,那么我就用v-for循環(huán)下,把index填充進(jìn)去就行了,刪除的時(shí)候根據(jù)index再進(jìn)行刪除。于是代碼是這樣的:
html:
<div id="app"> <ul> <li v-for="(item, index) in username"> ${index}. <input type="text" :name="'sb['+index+']'" /> <a href="javascript:;" :index="index" @click="del">delete</a> </li> </ul> <a href="javascript:;" @click="add">add</a> </div>
js:
var app = new Vue({ el: '#app', delimiters : ['${', '}'], data: { username : [1, 2, 3] // 只要數(shù)組的下標(biāo),因此數(shù)值無所謂 }, methods : { // 添加選項(xiàng) add : function(){ this.username.push(1); }, // 刪除當(dāng)前選項(xiàng) del : function(e){ var index = e.target.getAttribute('index'); // 獲取所在位置然后刪除 this.username.splice(index, 1); } } })
我們先在輸入框中輸入不同的內(nèi)容,然后刪除中間的某個(gè)選項(xiàng)。[demo1]
結(jié)果發(fā)現(xiàn),被刪除的永遠(yuǎn)是最后一個(gè)。這是為什么呢,我也是刪除數(shù)組了呀?我是看了官方文檔后才明白:用戶往輸入框內(nèi)輸入的內(nèi)容只保存在了DOM中,而我們是用vue中的username的下標(biāo)渲染的出來的DOM元素,我們并沒有保存用戶輸入的內(nèi)容。當(dāng)我們刪除了其中的某一項(xiàng)時(shí),username發(fā)生變化,導(dǎo)致DOM重新渲染,渲染后,最后一項(xiàng)就沒有了。
那么怎么修改才能真正的實(shí)現(xiàn)刪除某一項(xiàng)呢?我們只需要把用戶輸入的內(nèi)容保存到username數(shù)組中即可:
html:
<div id="app"> <ul> <li v-for="(item, index) in username"> ${index}. <input type="text" :name="'sb['+index+']'" :value="item" > <a href="javascript:;" :index="index" @click="del">delete</a> </li> </ul> <a href="javascript:;" @click="add">add</a> </div>
js:
var app = new Vue({ el: '#app', delimiters : ['${', '}'], data: { username : ['wenzi', 'xxxx', 'yyyy'] // 只要數(shù)組的下標(biāo),因此數(shù)值無所謂 }, methods : { // 添加選項(xiàng) add : function(){ this.username.push(''); // 新添加的輸入框?yàn)榭? }, // 刪除當(dāng)前選項(xiàng) del : function(e){ var index = e.target.getAttribute('index'); // 獲取所在位置然后刪除 this.username.splice(index, 1); } } })
再來看下效果:[demo2]
2. 上傳圖片
剛開始時(shí),使用的jQuery的插件fileupload,功能很全,當(dāng)我為file標(biāo)簽綁定上change事件后,然后再調(diào)用該插件進(jìn)行圖片上傳,總是會(huì)出現(xiàn)意想不到的bug,比如我先對(duì)圖片格式進(jìn)行限制,只能上傳png格式的圖片,可是有時(shí)候jpg格式的也能上傳上去;png格式的圖片,英文名稱無法上傳,先傳個(gè)中文名稱,然后就可以再上傳英文呢名稱的了。
后來發(fā)現(xiàn)html5下的formData屬性,能非常方便的上傳圖片,而且同時(shí)還能上傳其他的參數(shù),一小段代碼即可搞定:
// 上傳圖片,綁定change事件 uppic : function(e){ var file = e.target.files[0]; // 每次只允許上傳一張圖片,因此只取[0] // 判斷圖片格式 if( file.type!='image/png' ){ alert('圖片格式不正確'); e.target.files.length = 0; $(e.target).val(''); return false; } // 使用formData組裝數(shù)據(jù) var formData = new FormData(); formData.append('pic', $(e.target)[0].files[0]); // 文件數(shù)據(jù) formData.append('flag', '1'); // 其他的一些參數(shù) $.ajax({// ajax上傳 url: 'xxxxx.php', type: 'POST', cache: false, data: formData, processData: false, contentType: false }).done(function(result) { console.log('上傳完成'); }); }
關(guān)于“使用vue構(gòu)建一個(gè)上傳圖片表單的方法”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
當(dāng)前名稱:使用vue構(gòu)建一個(gè)上傳圖片表單的方法
瀏覽地址:http://m.newbst.com/article44/jhsjee.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供自適應(yīng)網(wǎng)站、定制網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣、
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)