Element实现上传下载

<el-upload
  name="file"
  action="接口地址"
  accept=".xls,.xlsx,.zip,.pdf,.word"
  :before-upload="doUpload">
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>
//上传
doUpload(file){
	const isLt5M = file.size / 1024 / 1024 < 5;
	if(!isLt5M){
		this.$message.error('上传的文件大小不能超过5M!');
	}
	let form = new FormData();
	// 参数
	form.append('id', this.currentTree.id);
	form.append('file', file);
	this.$http({
		method: 'post',
		url: '接口地址',
		data: form,
		headers: {
			'Content-Type':'multipart/form-data'
		}
	}).then(res => {
		if(res.data.code === 0){
			this.$message({
				message: '上传成功',
				type: 'success'
			})
		}else {
			this.$message({
				message: res.data.msg,
				type: 'warning'
			})
		}
	})
	return false;
}
//下载
downLoad(item) {
	//下载文件名
	const nameStr = item.name;
	//文件地址
	const urlStr = item.url;
	this.$http({
		method: 'post',
		url: `接口地址?filePath=${urlStr}`,
		responseType: 'blob
	}).then(res => {
		if(!res.data) return;
		var blob = new Blob([res.data]);
		var url = window.URL.createObjectURL(blob);
		var aLink = document.createElement('a');
		aLink.style.display = 'none';
		aLink.href = url;
		aLink.setAttribute('download',nameStr);
		document.body.appendChind(aLink);
		aLink.click();
		document.body.removeChild(aLink);// 下载完成移除元素
		window.URL.revokeObjectURL(url);// 释放掉blob对象
	})
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值