微客导航 » 文章资讯 » vue中用H5实现文件上传的方法实例代码

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

2024-02-21 21:04:03 308

整理文档，搜刮出一个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
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐