vue中用H5实现文件上传的方法实例代码

 <img v-if="personinfo.photourl" :src="headprefix + personinfo.photourl" style="height:126px;max-width:133px;margin: 25px 0;">
 <img v-else src="../../assets/default.png" style="height:126px;max-width:133px;margin: 25px 0;">

<form id="form1" enctype="multipart/form-data" method="post" action="">
        <div style="height:0px; overflow:hidden; position:absolute;">
         <input type="file" tabindex="-1" accept="image/jpeg,image/x-png,image/gif" name="file" style="padding-left:10px" id="filetoupload" @change="fileselected()"/>
        </div>
        <button type="button" class="btn btn-default btn-xs" onclick="document.getelementbyid('filetoupload').click()">上传</button>
        <button type="button" class="btn btn-default btn-xs" @click="deleteimg">删除</button>
       </form>

// 上传图片
  'fileselected': function () {
   var that = this
   let files = document.getelementbyid('filetoupload').files
   if (files && files.length) {
    var fd = new formdata()
    fd.append('file', files[0])
    var reader = new window.filereader()
    // 图片大小 100kb
    var filesize = 100 * 1024
    reader.readasdataurl(files[0])
    reader.onload = function (e) {
     if (e.target.result.length > filesize) {
      that.$dispatch('show-alert', 'msg_1016')
      document.getelementbyid('filetoupload').value = ''
     } else {
      var xhr = new xmlhttprequest()
      xhr.addeventlistener('load', that.uploadcomplete, false)
      xhr.open('post', that.$root.appbaseurl + 'fileupload/singlefileupload')
      xhr.send(fd)
     }
    }
   }
  },
  // 上传成功
  'uploadcomplete': function (evt) {
   this.personinfo.photourl = (evt.target.responsetext).replace('\\', '/')
   document.getelementbyid('filetoupload').value = ''
  },
  // 删除图片
  'deleteimg': function () {
   this.personinfo.photourl = ''
  },

computed: {
  headprefix: function () {
   let params = window.localdicts.dicts.ph_params.systemparam
   if (params.storagetype === 1) {
    return params.storageurl
   }
   return this.$root.appbaseurl
  }
}