如何使用vue上传图片

大概看了一下，Vuejs 1.* 可以尝试下面的解决方法：
html：

<input v-el="avatar" type="file" name="avatar" id="avatar" v-on:change="upload">

Vuejs：

 methods: {
        upload: function(e) {
            e.preventDefault();
            var files = this.$$.avatar.files;
            var data = new FormData();
            data.append('avatar', files[0]);
         
            this.$http.post('/avatars/upload', data, function (data, status, request) {
                  //handling
            }).error(function (data, status, request) {
                 //handling
            });
        }

@JellyBool
其實可以不用透過 v-el ，因為觸發事件時就會把觸發的元素傳進來 😛

upload: function(e) {
  var files = e.target.files
  // 同上
}

這樣做的另一個好處是可以共用邏輯

谢谢哈！但还有一个问题，就是vue有没有类似ajaxForm(options).submit()这样的方法？
如果使用vue-resource提交一个表单，是不是必须得一个个绑定input @Tomoe

@TonyWang

這個有個簡潔的方法可以讓你提交整個 Form
主要是利用 FormData 其實可以直接丟一個 Form 進去，他會自動處理那些欄位。

jsFiddle
裡面vue-resource部分註解掉了，你可以透過console看一下轉換成果，要注意的是 FormData 不能直接 console.log ， 必須透過 FormData.entries() 取得 iterator ，進行迭代才能顯示裡邊的 key/value。

還有一點是我把 submit 綁定到 form 上時用了修飾符 submit.prevent="submit" ， 這樣是會直接幫我們 event.preventDefault() ，比較方便。

<div id="main">
    <form @submit.prevent="submit">
        姓名
        <div class="field">
            <input name="name" type="text">
        </div>
        性別
        <div class="field">
            男<input name="gender" type="radio" value="male">
            女<input name="gender" type="radio" value="female">
        </div>
        <input type="submit" value="送出">
    </form>
</div>

new Vue({

	el: '#main',
    methods: {
    	submit: function(event) {
        	// FormData支援把 Form 元素丟進去
        	var formData = new FormData(event.target)
            
            this.$http.post('/path/to', formData, function (data, status, request) {
 				// Success
            }).error(function (data, status, request) {
 				// Error
            });

        }
    }

})

解决了我好多问题。