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

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

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

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

1. 轉變思維

使用vue編寫代碼，首先要做的就是轉換思維，vue是一個數據驅動的框架，我們只需要操作數據，數據變化后，vue會自動改變DOM結構，而jQuery是直接操作DOM的。比如剛開始寫的代碼中犯的錯誤，有一個頁面中的input標簽是并列多個的，而且name屬性的值是自增的，那么我就用v-for循環下，把index填充進去就行了，刪除的時候根據index再進行刪除。于是代碼是這樣的：
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] // 只要數組的下標，因此數值無所謂
 },
 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:

<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'] // 只要數組的下標，因此數值無所謂
 },
 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屬性，能非常方便的上傳圖片，而且同時還能上傳其他的參數，一小段代碼即可搞定：

// 上傳圖片，綁定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('上傳完成');
 });
}

關于“使用vue構建一個上傳圖片表單的方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。