vue中如何使用html5实现文件上传

这篇文章主要为大家展示了“vue中如何使用html5实现文件上传”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue中如何使用html5实现文件上传”这篇文章吧。

1.图片上传

 <img v-if="personInfo.photoUrl" :src="headPreFix + personInfo.photoUrl" >  <img v-else src="../../assets/default.png" >

<form id="form1" enctype="multipart/form-data" method="post" action="">         <div >          <input type="file" tabIndex="-1" accept="image/jpeg,image/x-png,image/gif" name="file"  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   } }

以上是“vue中如何使用html5实现文件上传”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！