angular使用_HttpClient或者Fetch发送POST/GET请求下载/上传文件
一:下载文件写法
1.post请求_HttpClient写法、
myTest() {
const params = { aa: "aa", bb: "bb" }; // body的参数
const url = 'http://10.10.10.22:8080/sss'
const queryParams = undefined; // url query的参数
this.http.post(url, params, queryParams, {
responseType: "blob",
headers: new HttpHeaders().append("Content-Type", "application/json")
}).subscribe(res => {
// res: 文件流
this.downloadFile(res);
})
}
/**
* 创建blob对象,并利用浏览器打开url进行下载
* @param data 文件流数据
*/
downloadFile(data) {
// 下载类型 xls
const contentType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
// 下载类型:csv
// const contentType2 = 'text/csv';
const blob = new Blob([data], { type: contentType });
const url = window.URL.createObjectURL(blob);
// 打开新窗口方式进行下载
// window.open(url);
// 以动态创建a标签进行下载
const a = document.createElement('a');
const fileName = 'file';
a.href = url;
a.download = fileName + '.xlsx';
a.click();
window.URL.revokeObjectURL(url);
}
2.post请求使用Fetch 写法、
requestData = {
aa: aa,//這個給的是勾選的no列表
bb: bb
}
//下载execl文件
fetch(url, {
method: "POST",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(requestData)
})
.then(res => res.blob())
.then(data => {
this.showSpin = false;
let blobUrl = window.URL.createObjectURL(data)
const a = document.createElement('a')
a.style.display = 'none';
a.setAttribute('target', '_blank');
a.download = '<List>';
a.href = blobUrl;
a.click();
})
3.GET请求第一种写法、
let url = `${BaseUrl.path}/aa/bb/cc?no=${this.sqcode}&pae=${this.wlName}&ase=${this.setDate(this.data[0])}&eae=${this.setDate(this.data[1])}&esy=${this.empId}&aay=${this.sqName}`;
const a = document.createElement('a')
a.style.display = 'none';
a.setAttribute('target', '_blank');
a.href = url;
a.click();
4.GET请求第二种写法、
myExport() { var elemIF = document.createElement('iframe');
elemIF.src = myUrl.myParticleBaseUrl + '/qqq/file?aaa=vvvvvfl';
elemIF.style.display = 'none';
document.body.appendChild(elemIF); },
二:上传文件的写法
三:VUE中上传一个文件给后端,后端返回另一个文件下载
<template>
<div>
<!-- 導入 -->
<a
href="javascript:;"
class="button_s my_file el-button button_s el-button--primary el-button--small"
>
<input id="upload" type="file" class="my_input" @change="importExcel" />上傳111
</a>
<!-- 導入 -->
</div>
</template> <script>
import axios from 'axios'
export default {
data() {
return {}
},
mounted() {},
methods: {
async importExcel(e) {
const files = e.target.files
if (files.length <= 0) {
return false
} else if (!/\.(xlsx)$/.test(files[0].name.toLowerCase())) {
alert('上传格式不正确,请上传xlsx格式')
return false
}
this.fileName = files[0].name
// 如果要發送後端處理,這個代碼1
const url1 = 'http://10.10.10.10:8088/abc'
const myformdataFile = new FormData()
myformdataFile.append('file', e.target.files[0], 'a.xlsx')
axios
.post(url1, myformdataFile, {
'responseType': 'blob',
'Content-Type': 'application/json'
})
.then(({ data }) => {
const contentType =
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
// 下载类型:csv
// const contentType2 = 'text/csv';
const blob = new Blob([data], { type: contentType })
const url = window.URL.createObjectURL(blob)
// 以动态创建a标签进行下载
const a = document.createElement('a')
const fileName = 'file'
a.href = url
a.download = fileName + '.xlsx'
a.click()
window.URL.revokeObjectURL(url)
})
var input = document.getElementById('upload')
input.value = ''
}
// 導入
}
}
</script>
<style lang="less" scoped>
</style>
angular使用_HttpClient或者Fetch发送POST/GET请求下载/上传文件的更多相关文章
- Python3+Selenium3+webdriver学习笔记9(发送富文本信息及上传文件处理)
#!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记9(发送富文本信息及上传文件处理)'''from seleni ...
- c#代码发送post请求,上传文件(并带其他参数)
本人对post理解不深,前段时间遇到一个需要用c#代码发送post请求上传文件的业务,于是参考了几篇帖子,加上自身实践写出了如下代码.写的比较low 望各位大大指正^_^. 业务需求: 对方给了一个接 ...
- restTemple发送请求、上传文件(@LoadBalanced微服务调用及url调用)
import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Co ...
- Django学习——ajax发送其他请求、上传文件(ajax和form两种方式)、ajax上传json格式、 Django内置序列化(了解)、分页器的使用
1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...
- fetch发送Form Data请求并携带cookie
今天我们来说说如何fetch发送Form Data请求并携带cookie,直接进入正题好吧,别问我今天为啥不在开始吹两句了,累到一句牛逼不想吹...... 步骤1: 设置头部,"Conten ...
- fetch上传文件报错的问题(multipart: NextPart: EOF)
技术栈 后台: gin(golang) 前端: react+antd+dva 问题 前端这边使用fetch发送http请求的时候,后端解析formData报错: multipart: NextPart ...
- Android 发送HTTP GET POST 请求以及通过 MultipartEntityBuilder 上传文件(二)
Android 发送HTTP GET POST 请求以及通过 MultipartEntityBuilder 上传文件第二版 上次粗略的写了相同功能的代码,这次整理修复了之前的一些BUG,结构也大量修改 ...
- java前后分离使用fetch上传文件失败500
这次不是写什么技术要点,仅仅是记录一下 最近遇到的一个问题 背景 使用fetch向java后台上传文件时,前端调试报错500,后端的报错为multipart 无法解析,翻译过来大概是这个意思. 由于本 ...
- 【httpclient-4.3.1.jar】httpclient发送get、post请求以及携带数据上传文件
1.发送get.post携带参数以及post请求接受JSON数据: package cn.qlq.utils; import java.io.BufferedReader; import java.i ...
- Springboot第三篇:与前端fetch通信(关于前端传输json数据上传文件等等前后端的处理)
关于前端接口传递的方法,推荐按以下使用: 若要在服务器上创建资源,推荐使用POST方法 若要检索某个资源,推荐使用GET方法 若要更新资源,推荐使用PUT方法 若要删除某个资源,推荐使用DELETE方 ...
随机推荐
- day03-CSS
CSS 1.css介绍 css指的是层叠样式表(cascading style sheets) 官方文档:https://www.w3school.com.cn/css/index.asp 为什么需要 ...
- 分清国内版FireFox和国际版FireFox
FireFox现在成为越来越多人替代Chrome的选择.但与Chrome不同的是,FireFox无论桌面端还是移动端,都有着『国际』和『国内』版本的区分. 二.正确的下载地址 2.1国内版的混淆视听: ...
- C. 连锁商店(状压dp)
C. 连锁商店 time limit per test 1 second memory limit per test 512 megabytes input standard input output ...
- ansible回调插件介绍(待完成)
简介 ansible回调插件(callback plugins)允许为事件添加一些额外响应.这里的事件包括了执行任务(task)的结果,例如(ok.failed.unreachable.skipped ...
- 匿名方法、Lambda表达和自定义泛型委托以及Func、Action系统泛型委托
1.匿名方法的概念:一个方法没有具体的名称,而只有关键字delegate.方法参数.方法体.这种方法是匿名方法. 匿名方法的好处:将具体方法和委托直接关联在一起,如果我们基于委托只需要一个方法的时候, ...
- 小程序基础之引用vant组件库
第一步:终端npm init -y 会生成一个pack.json文件.(初始化包管理,记录这个项目用的包.) 第二步:npm install 会生成一个 package-lock.json文件.(一个 ...
- 【DL论文精读笔记】VGGNet
VGGNet(Very Deep Convolutional Networks) 1.introduction ● 采用3x3的小卷积核应用在比较深的网络里 ● 结果不错,赢得了2014 Imagen ...
- ARM MMU架构 -- CPU如何访问MMU及DRAM
<ARM Architecture Reference Manual ARMv8-A>里面有Memory层级框架图,从中可以看出L1.L2.DRAM.Disk.MMU之间的关系,以及他们在 ...
- 带你了解基于Ploto构建自动驾驶平台
摘要:华为云Solution as Code推出基于Ploto构建自动驾驶平台解决方案. 本文分享自华为云社区<基于Ploto构建自动驾驶平台>,作者:阿米托福 . 2022年6月15日, ...
- python3 利用当前时间、随机数产生一个唯一的数字作为文件名
一.python3 利用当前时间.随机数产生一个唯一的数字作为文件名 代码如下: #-*-coding:utf-8-*- #python3自动生成文件名 from datetime import * ...