如何使用vue上传图片

兄弟们,请教两个问题。

  1. 使用vue-resource上传图片,在上传的时候我怎么得到file,也是通过v-model绑定file吗?

  2. vue有没有类似ajaxForm(options).submit()这样的方法?

@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
            });

        }
    }

})
JellyBool

大概看了一下,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
            });
        }
Ctrl 回复 JellyBool

请问
this.$$是什么意思 是什么写法

Tomoe

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

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

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

TonyWang

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

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
            });

        }
    }

})
TonyWang

解决了我好多问题。