vue实现文件上传和下载_vue上传文件前端完整实例

vue实现文件上传和下载_vue上传文件前端完整实例文件上传这里使用elementui组件库的文件上传组件1.手动上传(文件选取后需点击确认上传)action:上传地址auto-upload:是否在选取文件后立即进行上传,默认true手动上传要将其设置为falsebefore-upload:上传文件之前的钩子,参数为上传的文件,上传格式的规定要求可在此钩子函数中写(示例中规定上传格式xlsx或xls)on-success:文件上传成功时的钩子,function(response,file,fileList)ref:注册DOM对象(点

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

文件上传

这里使用elementui组件库的文件上传组件

1.手动上传(文件选取后需点击确认上传)

  • action:上传地址
  • auto-upload:是否在选取文件后立即进行上传,默认true手动上传要将其设置为false
  • before-upload :上传文件之前的钩子,参数为上传的文件,上传格式的规定要求可在此钩子函数中写(示例中规定上传格式xlsx或xls)
  • on-success :文件上传成功时的钩子,function(response, file, fileList)
  • ref :注册DOM对象(点击确认上传时获取dom元素并进行一些操作)
<template>
<div>
<el-upload
class="upload-demo"
ref="uploadFile"     
:action="actionUrl"
:before-upload="beforeFileUpload"
:auto-upload="false"
:on-success='onSuccess'
:on-error="onError">
<el-button size="small" type="primary">选择文件</el-button>
</el-upload>
<el-button type="primary" @click="submitUpload">确认上传</el-button>
</div>
</template>
import { 
 BASE_URL_Manage } from 'config'
export default { 
  
data () { 

return { 
      
actionUrl: BASE_URL_Manage+'/webManage/upload', // 上传地址 
}
},
methods:{ 

//确认上传
submitUpload() { 

this.$refs.uploadFile.submit();
},
//文件上传之前
beforeFileUpload(file){ 

const File = file.name.replace(/.+\./,"");
if (['xlsx','xls'].indexOf(File.toLowerCase())===-1 ) { 

this.$message.error('只支持上传xlsx、xls文件格式!');
this.$refs.uploadFile.clearFiles();
return false;
}            
},
//文件上传成功
onSuccess(){ 

this.$message.success("文件上传成功");       
},
//上传失败
onError(){ 

this.$refs.upload.clearFiles();
this.$message.error("文件上传失败")
}
}
}

2.立即上传(文件选取后将自动上传)

上传组件去掉 auto-uploadref 即可

<template>
<div>
<el-upload
class="upload-demo"	       
:action="actionUrl"
:before-upload="beforeFileUpload"	     
:on-success='onSuccess'
:on-error="onError">
<el-button size="small" type="primary">上传文件</el-button>
</el-upload>
</div>
</template>
import { 
 BASE_URL_Manage } from 'config'
export default { 
  
data () { 

return { 
      
actionUrl: BASE_URL_Manage+'/webManage/upload', // 上传地址 
}
},
methods:{ 
	
//文件上传之前
beforeFileUpload(file){ 

const File = file.name.replace(/.+\./,"");
if (['xlsx','xls'].indexOf(File.toLowerCase())===-1 ) { 

this.$message.error('只支持上传xlsx、xls文件格式!');
this.$refs.uploadFile.clearFiles();
return false;
}            
},
//文件上传成功
onSuccess(){ 

this.$message.success("文件上传成功");       
},
//上传失败
onError(){ 

this.$refs.upload.clearFiles();
this.$message.error("文件上传失败")
}
}
}

3.上传文件(借助el-upload组件选取文件,自行调上传接口)

  • on-change:文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用, function(file, fileList)
  • on-remove:文件列表移除文件时的钩子, function(file, fileList)
  • limit:最大允许上传文件的个数
<template>
<div>
<el-upload
class="upload-demo"
ref="uploadFile"     
:action="-"
:auto-upload="false" 
:limit="1"     
:on-change="onChangeFile"
:on-remove="onRemoveFile">
<el-button size="small" type="primary">选择文件</el-button>
</el-upload>
<el-button type="primary" @click="submitUpload">上传文件</el-button>
</div>
</template>
import * as api from "@/api/userPage/index";
export default { 
  
data () { 

return { 
      
userFile: null, // 上传的文件 
}
},
methods:{ 

//确认上传
submitUpload() { 

if(this.userFile==null){ 

return this.$message.error("请先选取文件!"); 
}   			 			   		
//文件上传添加上传参数(若无需添加参数则直接传this.userFile给接口)
const formdata = new FormData();
formdata.append("file", this.userFile);
formdata.append("user","张三");	
//传对象参数,需转成json字符串形式
let tick={ 

code:"fdgfhgghg",
uid:"4566895623"
}
formdata.append("ssoTick",JSON.stringify(tick));	
//调用上传接口 
api.upload(formdata).then(res => { 
			
if (res.code == 200) { 
				
this.$message.success("上传成功");							
}else{ 

this.$message.error(res.msg);
}
});      	
},
//文件上传改变
onChangeFile(file, arr){ 

//限制文件大小 
let isLt2M = file.raw.size / 1024 / 1024 < 2;
if(!isLt2M){ 

this.$refs.uploadFile.clearFiles();
return this.$message.error('上传文件大小不能超过 2MB!');
}			
this.userFile = file.raw;		
},
//文件移除
onRemoveFile(){ 
			
this.userFile=null;
},
}
}

api/userPage/index.js文件

import { 
 createService } from '@/api/fetch-auth' 
import { 
 BASE_URL_Manage } from 'config'
var fetch = createService('Timstar')
//文件上传
export function upload (data) { 

return fetch({ 

url: BASE_URL_Manage + '/targetmanager/upload',
method: 'post',
data,
transformRequest(data) { 

return data;
},
headers: { 

"Content-Type": "multipart/form-data"
}
})
}

文件下载

针对文件下载请求,后端返回给前端是文件流的形式
使用 axios

axios.post(请求路径URL, { 
参数Params}, { 

responseType: 'blob'
}).then(function(res){ 

//创建a标签
let aLink=document.createElement('a');
//兼容不同浏览器的url对象
const URL=window.URL||window.webkitURL||window.moxURL;
aLink.href=URL.createObjectURL(res.data);
//将创建的a标签添加到body中
document.body.appendChild(aLink);
//获取文件名
aLink.download= decodeURIComponent(res.headers['content-disposition'].split(';')[1].split('fileName=')[1]);
aLink.click();
//移除aLink节点
document.body.removeChild(aLink);
//销毁url对象
URL.revokeObjectURL(aLink.href);
}
});

需注意的几个地方

  • 设置请求返回类型, responseType: ‘blob’
  • 获取文件名 headers[‘content-disposition’].split(’;’)[1].split(‘fileName=’)[1]
  • decodeURIComponent() 解码URI
    可以看看具体后端返回给你的响应头里的内容
    在这里插入图片描述
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/170636.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号