做一个图片预览的功能， 用原生的js做可以做出来，但是怎么添加到vue里面？

Question

我现在有这样一个需求， 我需要做一个图片预览的功能， 用原生的js做可以做出来，但是怎么添加到vue里面？ 我遇到这样一个问题：this.files[0] 找不到。。我把这段代码整理到 vue的 methods里面大家看一下怎么弄呢

Answer 1

this.files 替换成 e.target.files || e.dataTransfer.files

参考

Answer 2

<div class="box-col">
        <span class="icon iconfont fur-tripzhaopianxu" @click="upload"></span>
      </div>
      <div class="upload-img">
        <div v-for="(image, key) in images" class="upload-list" :class="'list-'+key">
          <img width="93" height="93" :src="'http://192.168.0.5/uploads/'+image" />
          <span class="pic-dele icon iconfont fur-shanchu" :class="'dele-'+key" :rel="image" @click="delImage(image,key)"></span>
        </div>
        <form id='myupload' method="post" enctype="multipart/form-data">
          <div v-if="images.length > 0 && images.length < 6" class="add-picture icon iconfont fur-tianjiazhaopian" @click="upload"></div>
          <input name="fileToUpload" id="fileToUpload" type="file" accept="image/*" @change="onFileChange" style="display: none;">
        </form>
      </div>

// 上传图片
            upload(e) {
                e.preventDefault()
                $('input[type=file]').trigger('click')
                return false
            },
            onFileChange(e) {
                let files = e.target.files || e.dataTransfer.files
                if (!files.length) {
                    return false
                }
                this.createImage(files)
            },
            createImage(file) {
                let maxsize = 0.5 * 1024 * 1024;
                self = this
                if (!/^image/.test(file[0].type)){
                    util.toast("仅支持 .jpg .gif .png 的图片格式")
                    return false
                } 
                if (file[0].size > maxsize) {
                    util.toast("最大0.5M图片")
                    return false
                }
                for(var i=0;i<file.length;i++){
                    $("#myupload").ajaxSubmit({
                        url:'/upload.php',
                        dataType : 'json',
                        success : function (data){
                            self.images.push(data.pic)
                        }
                    })
                }               
            }