vue axios实现文件下载及某视频剪辑软件中使用爱可信的实例

功能：点击导出按钮，提交请求，下载超过文件；

第一步：跟后端童鞋确认交付的接口的应答标题设置了

以及返回了文件流。

第二步：修改爱可信请求的响应类型为斑点，以邮政请求为例：

axios({ method: 'post '、url: 'api/user/'、data: { firstName: 'Fred '、lastName: ' Flintstone ' }、responseType: 'blob'}).然后（响应={ this.download(响应)})。捕捉(错误)={})第三步：请求成功，拿到反应后，调用下载函数（创建a标签，设置下载属性，插入到文档中并点击)

methods: { //下载文件下载（数据){ if(！数据){返回}让url=窗口.URL.createObjectURL(新Blob([数据])让link=document。createelement(' a ')链接。风格。display=' none '链接。href=网址链接。setAttribute('下载'，' excel。xlsx’)文档。尸体。appendchild(链接)链接。单击()} }下面在通过实例代码看下某视频剪辑软件中使用爱可信

1.安装爱可信

国家预防机制：

$ npm安装axios -S

cdn:

脚本src=' http :https://unpkg。com/axios/dist/axios。量滴js '/脚本2 .配置爱可信

在项目中新建api/index.js文件，用以配置爱可信

api/index.js

从“axios”导入axios让http=axios。创建({ baseurls : ' http://localhost :8080/'，withCredentials: true，标头RS : { ' Content-Type ' : ' application/x-www-form-URL编码；charset=utf-8' }，transform request :[function(data){ let new data=' '；用于(让k进入数据){ if(数据。hasown属性(k)=true){ new data=encodeURIComponent(k)'=' encodeURIComponent(data[k])' '；} }返回新数据；}]});函数apiAxios(方法、网址、参数、响应){ http({ method:方法、url:方法==' POST ' | |方法===' PUT '？参数：为空，参数：方法==='GET' ||方法==='DELETE '？params : null，}).然后（函数(res)响应(RES)}；}).catch(function(err)){ response(err)；})}导出默认{ get:函数(网址),参数、响应){返回apiAxios('GET '、url、参数、响应)}，邮政：函数(网址),参数、响应){返回apiAxios('POST '、网址、参数、响应)}，put:函数(网址),参数、响应){返回apiAxios('PUT '、url 、}参数、响应)}，delete:函数(网址),参数、响应){返回apiAxios(')

这里的配置了发布、获取、投放、删除方法。并且自动将数据格式数据转为统一资源定位器拼接的方式

同时配置了跨域，不需要的话将带字符设置为错误的即可

并且设置了默认头部地址为：http://localhost:8080/，这样调用的时候只需写访问方法即可

3.使用爱可信

注：PUT请求默认会发送两次请求，第一次预检请求不含参数，所以后端不能对放请求地址做参数限制

首先在main.js中引入方法

从""导入Api ./API/索引。js '；Vue.prototype. $ api=Api然后在需要的地方调用即可

这个$api.post('user/login.do(地址)', { '参数名': '参数值},响应={ if(响应。状态=200响应。状态300){控制台。日志(响应。数据)；\\请求成功，响应为成功信息参数} else { console。日志(响应。消息)；\\请求失败，响应为失败信息}});

总结

以上所述是小编给大家介绍的vue axios实现文件下载及某视频剪辑软件中使用爱可信的实例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！