如何使用vue上传图片

TonyWang · 7年前

兄弟们，请教两个问题。

使用vue-resource上传图片，在上传的时候我怎么得到file，也是通过v-model绑定file吗？
vue有没有类似ajaxForm(options).submit()这样的方法？

Tomoe

這個有個簡潔的方法可以讓你提交整個 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
            });

        }
    }

})