微客导航 » 文章资讯 » 原生js实现文件上传、下载、封装等实例方法

原生js实现文件上传、下载、封装等实例方法

2023-08-03 13:08:03 319

一、下载

1、代码

constfileDownloadClick=(obj)=>{//解决兼容
if(document.all){
obj.click();
}else{
letevent=document.createEvent("MouseEvents");
event.initEvent('click',true,true);
obj.dispatchEvent(event);
}
}
constfileDownload=(res,obj)=>{//下载
/*
obj:{
userName下载人
weeklyTime下载时间
weeklyType下载类型
}
*/
letblob=newBlob([res]);
leturl=window.URL.createObjectURL(blob);
letlink=document.createElement('a');
link.style.display='none';
link.href=url;
link.setAttribute('download',`${obj.userName||''}_${obj.weeklyTime||dateFormatYMD(newDate())}_${obj.weeklyType||'.xlsx'}`);
document.body.appendChild(link);
//link.click();
fileDownloadClick(link);
window.URL.revokeObjectURL(url);
}

2、请求时，需增加请求头

responseType:'blob',

3、使用

res:后台返回的文件流（类似于乱码的东西）
obj：下载文件名称

//页面中调用
this.fileDownload=(res,obj)

二、上传（基于vue）

1、页面使用





handleUploadFile(row){//通过某一事件触发
this.$refs['upload'].click();
},



asynchandleUploadChange(e){//
try{
letres=awaitthis.CommonUpload(e);
if(res.code=='200'){//获取其他code值，根据后台来定
this.handleProjectAddFile(res.data)
}else{}
}
catch(err){}
}

2、方法封装（只判断大小，也可通过accept判断要接收的类型等其他类型）

CommonUpload(e){
constfiles=e.target.files;
letformData=newFormData();
if(files&&files[0]){
constfile=files[0];
if(file.size>1024*1024*3){
alert('文件大小不能超过3M');
return;
}else{
formData.append("multipartFile",file);
}
}
this.uploadFile_(formData)//为调用上传接口方法
}

3、问题当再次选择同一文件时，失效

解决：（上传后执行下面）
this.$refs['upload'].value='';//解决inputfile第二次失效的问题

原因：
inputfilevalue值为新选中的值，所以下次再选同一文件，不会触发change事件

以上就是本次介绍的全部相关知识点，如果有任何疑问和补充大家可以联系小编，感谢大家对毛票票的支持。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

原生js实现文件上传、下载、封装等实例方法

热门推荐

随机推荐