vue圖片上傳預覽

jsp

<div class="tab-pane" id="tab_1_2">
    <form action="#" role="form" id="userPhotoFrom">
        <div class="form-group">
            <div class="fileinput fileinput-new" data-provides="fileinput">
                <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                    <img src="" alt="" id="image" /> </div>
                <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"> </div>
                <div>
                        <span class="btn default btn-file">
                            <span class="fileinput-new"> 選擇圖片 </span>
                            <span class="fileinput-exists"> 更改圖片 </span>
                            <input type="hidden" name="img"  id="thumbUrl"/>
                            <input type="file" name="file" id="file" @change="userPhoto($event)"> </span>
                    <a href="javascript:;" class="btn default fileinput-exists" data-dismiss="fileinput"> 刪除圖片 </a>
                </div>
            </div>
            <div class="clearfix margin-top-10">
                <strong class="label label-danger">注意：&nbsp;</strong>
                <span>暫只支持常見圖片格式：png、jpg、jpeg</span>
            </div>
        </div>
        <div class="margin-top-10">
            <a href="javascript:;" class="btn green" @click="uploadPhoto()"> 提交 </a>
            <a href="javascript:;" class="btn default"> 取消 </a>
        </div>
    </form>
</div>

js

userPhoto:function(e){
    // var file = e.target.files[0]
    // var reader = new FileReader()
    // var self = this
    // reader.readAsDataURL(file)
    // reader.onload = function(e) {
    //
    //     self.avatar = this.result
    //     console.info(this.result);
    // }

    //將選擇的文件放到當前vue中
    this.file = e.target.files[0];
    //獲取選擇的文件的url路徑並放到指定的src下面
    $("#image").prop("src",window.URL.createObjectURL(e.srcElement.files.item(0)))
    console.log(this.file);

},