使用vue構建一個上傳圖片表單

這篇文章主要爲大家詳細介紹了使用vue構建一個上傳圖片表單，具有一定的參考價值，感興趣的小夥伴們可以參考一下

這篇博客也不知道起個什麼名字比較好，畢竟剛開始學習vue，很多還不是很熟悉，一直在慢慢摸索中；之前也習慣了用jQuery寫js代碼，思維邏輯也要有個轉換的過程。

1. 轉變思維

使用vue編寫代碼，首先要做的就是轉換思維，vue是一個數據驅動的框架，我們只需要操作數據，數據變化後，vue會自動改變DOM結構，而jQuery是直接操作DOM的。比如剛開始寫的代碼中犯的錯誤，有一個頁面中的input標籤是並列多個的，而且name屬性的值是自增的，那麼我就用v-for循環下，把index填充進去就行了，刪除的時候根據index再進行刪除。於是代碼是這樣的：
html:

?

1 2 3 4 5 6 7 8

<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:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

var app = new Vue({   el: '#app',   delimiters : ['${', '}'],   data: {    username : [1, 2, 3] // 只要數組的下標，因此數值無所謂   },   methods : {   // 添加選項  add : function(){    this.username.push(1);   },    // 刪除當前選項   del : function(e){    var index = e.target.getAttribute('index'); // 獲取所在位置然後刪除    this.username.splice(index, 1);   }   } })

我們先在輸入框中輸入不同的內容，然後刪除中間的某個選項。[demo1]
結果發現，被刪除的永遠是最後一個。這是爲什麼呢，我也是刪除數組了呀？我是看了官方文檔後才明白：用戶往輸入框內輸入的內容只保存在了DOM中，而我們是用vue中的username的下標渲染的出來的DOM元素，我們並沒有保存用戶輸入的內容。當我們刪除了其中的某一項時，username發生變化，導致DOM重新渲染，渲染後，最後一項就沒有了。
那麼怎麼修改才能真正的實現刪除某一項呢？我們只需要把用戶輸入的內容保存到username數組中即可：

html:

?

1 2 3 4 5 6 7 8

<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:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

var app = new Vue({   el: '#app',   delimiters : ['${', '}'],   data: {    username : ['wenzi', 'xxxx', 'yyyy'] // 只要數組的下標，因此數值無所謂   },   methods : {   // 添加選項  add : function(){    this.username.push(''); // 新添加的輸入框爲空   },    // 刪除當前選項   del : function(e){    var index = e.target.getAttribute('index'); // 獲取所在位置然後刪除    this.username.splice(index, 1);   }   } })

再來看下效果：[demo2]

2. 上傳圖片

剛開始時，使用的jQuery的插件fileupload，功能很全，當我爲file標籤綁定上change事件後，然後再調用該插件進行圖片上傳，總是會出現意想不到的bug，比如我先對圖片格式進行限制，只能上傳png格式的圖片，可是有時候jpg格式的也能上傳上去；png格式的圖片，英文名稱無法上傳，先傳箇中文名稱，然後就可以再上傳英文呢名稱的了。
後來發現html5下的formData屬性，能非常方便的上傳圖片，而且同時還能上傳其他的參數，一小段代碼即可搞定：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

// 上傳圖片，綁定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組裝數據   var formData = new FormData();   formData.append('pic', $(e.target)[0].files[0]); // 文件數據   formData.append('flag', '1'); // 其他的一些參數   $.ajax({// ajax上傳     url: 'xxxxx.php',     type: 'POST',     cache: false,     data: formData,     processData: false,     contentType: false   }).done(function(result) {     console.log('上傳完成');   }); }

3. 總結

現在也是剛開始學習vue，代碼肯定比較爛，最重要的還是轉變思維吧！

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。