vue中用H5实现文件上传的方法实例代码
整理文档,搜刮出一个vue中用H5实现文件上传的方法实例代码,稍微整理精简一下做下分享。
1.图片上传
//上传图片 'fileSelected':function(){ varthat=this letfiles=document.getElementById('fileToUpload').files if(files&&files.length){ varfd=newFormData() fd.append('file',files[0]) varreader=newwindow.FileReader() //图片大小100KB varfileSize=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{ varxhr=newXMLHttpRequest() 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(){ letparams=window.localdicts.dicts.ph_params.systemParam if(params.storageType===1){ returnparams.storageUrl } returnthis.$root.appBaseUrl } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。