使用vue構(gòu)建一個(gè)上傳圖片表單的方法

這篇文章將為大家詳細(xì)講解有關(guān)使用vue構(gòu)建一個(gè)上傳圖片表單的方法，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測試性更強(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會自動(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)行圖片上傳，總是會出現(xiàn)意想不到的bug，比如我先對圖片格式進(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)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。