用完整代码展示如何在eclipse实现网页中输入车牌，点击搜索信息，将停车时间显示在页面。接口代码如下：import axios from "axios"; const options = { method: 'POST', url: 'https://10.198.8.185:443/artemisl', headers: { Accept: '/', 'Content-Type': 'application/json', 'x-ca-key': '29801952', 'x-ca-signature-headers': 'x-ca-key', 'x-ca-signature': 'RA=', 'content-type': 'application/json' }, data: {parkSyscode: 'fe23e1', plateNo: '粤A643N0'} }; axios.request(options).then(function (response) { console.log(response.data); }).catch(function (error) { console.error(error); });接口返回信息如下{ "code": "0", "msg": "success!", "data": { "enterTime": "2023-06-09T11:50:34+08:00", "plateNo": "粤A643N0", "cardNo": "", "parkTime": 205, "delayTime": 30, "currentDeduceCost": "0.00" } }

时间: 2024-04-04 10:29:34 浏览: 54

在vue中使用axios实现post方式获取二进制流下载文件(实例代码)

5星 · 资源好评率100%

在Vue.js应用中，使用axios库来实现POST方式获取二进制流并下载文件是一个常见的需求，特别是当需要从服务器获取如Excel、PDF等特定格式的文件时。本篇文章将详细解析这一过程，并提供相关代码实例。我们来看如何在Vue中配置axios来接收二进制流。在发送POST请求时，需要设置`responseType`为`blob`，这样axios将会处理返回的二进制数据。例如： ```javascript axios.post({ url: 'your-api-url', method: 'post', responseType: 'blob' }).then((res) => { // 处理二进制流 }); ``` 当服务器返回二进制流时，我们需要将其转化为可下载的文件。这通常涉及到FileReader API，用来读取Blob对象。我们可以创建一个FileReader实例，然后使用`readAsDataURL`方法读取Blob数据。当读取完成后，FileReader的`onload`事件会被触发，此时我们可以获取到一个data URL，这个URL可以被用作下载链接： ```javascript let blob = res.data; let reader = new FileReader(); reader.readAsDataURL(blob); reader.onload = (e) => { let a = document.createElement('a'); a.download = 'fileName.xlsx'; a.href = e.target.result; document.body.appendChild(a); a.click(); document.body.removeChild(a); }; ``` 在这个过程中，可能会遇到一个问题，即无法通过axios的`res.headers`获取到服务器返回的`Content-Disposition`头，该头包含了文件的实际名称。这是因为浏览器的同源策略限制了对某些HTTP响应头的访问。为了解决这个问题，后端需要设置`Access-Control-Expose-Headers`，将`Content-Disposition`包含在内： ```java response.setHeader("Access-Control-Expose-Headers", "Content-Disposition"); ``` 如果即使这样仍然无法获取，后端可以考虑直接在响应体中提供一个名为`fileName`的字段，以JSON形式传递文件名。在Vue项目中，为了方便全局使用axios，可以将axios实例注入到Vue的原型链上，如下所示： ```javascript import axios from 'axios'; Vue.prototype.$axios = axios; ``` 这样，在任何Vue组件中都可以直接通过`this.$axios`调用axios的方法。以下是一个简单的例子： ```javascript this.$axios.post('http://ai.yiche.com/web/ability/nlu/standardTokenizer', { text: "动效如果有跟评审结论有出入的地方或者不清楚的地方，随时沟通哈~" }).then((res) => { console.log(res.data); }).catch((err) => { if (err.response) { console.log(err.response); } }); ``` 通过设置axios的`responseType`为`blob`，配合FileReader API，我们可以成功地处理服务器返回的二进制流并实现文件下载。同时，需要注意浏览器的跨域策略对HTTP响应头的影响，确保后端正确设置`Access-Control-Expose-Headers`或提供额外的文件名字段。在Vue项目中，通过将axios注入到原型链，可以更方便地在各个组件中使用。

以下是一个完整的代码示例，可以实现在网页中输入车牌，点击搜索信息，并将停车时间显示在页面上： HTML 代码： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>停车信息查询</title> </head> <body> <input type="text" id="plateNoInput" placeholder="请输入车牌号码"> <button id="searchBtn">搜索</button> <p id="parkTime"></p> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script src="script.js"></script> </body> </html> ``` JavaScript 代码（保存在 script.js 文件中）： ``` const plateNoInput = document.getElementById('plateNoInput'); const searchBtn = document.getElementById('searchBtn'); const parkTime = document.getElementById('parkTime'); searchBtn.addEventListener('click', () => { const plateNo = plateNoInput.value; axios.post('https://10.198.8.185:443/artemisl', { parkSyscode: 'fe23e1', plateNo: plateNo, }, { headers: { Accept: '/', 'Content-Type': 'application/json', 'x-ca-key': '29801952', 'x-ca-signature-headers': 'x-ca-key', 'x-ca-signature': 'RA=', 'content-type': 'application/json', }, }).then(response => { const data = response.data.data; parkTime.innerText = `停车时间：${data.parkTime}分钟`; }).catch(error => { console.error(error); }); }); ``` 在上面的代码中，我们首先获取了页面中的输入框和按钮元素，并为按钮添加了一个点击事件监听器。当用户点击搜索按钮时，会从输入框中获取车牌号码，并将其作为参数发送 POST 请求到指定的接口地址。当接口返回响应时，我们解析响应数据并将停车时间显示在页面上。在这个例子中，我们将停车时间显示在一个 p 元素中，其 id 为 "parkTime"。需要注意的是，我们在页面中引入了 axios 库，以便发送 AJAX 请求。如果你没有将该库添加到你的项目中，请先执行以下命令安装它： ``` npm install axios ```

阅读全文

相关推荐

axios-service:使axios更容易在代码中使用

Flipkart-Price-Tracker:在 nodejs 中使用cheerio 和 axios 的网页抓取项目

ts-axios:使用TypeScript实现axios

ts-axios:TypeScript实现axios

vue-axios:vue+axios 接口文件封装

sea-axios:axios 封装

ts-axios::watermelon: 用 TypeScript 实现 axios 浏览器部分，完善的 demo 与单元测试

node-koa2-axios:实现axios请求数据

ts-axios：通过打字稿实现axios

vite2-axios:封装Axios接口数据缓存+取消重复请求

test-axios:axios的学习笔记

encapsulation-axios:封装axios

ts-axios:根据axios原始码，使用ts实现的ts版axios现在只实现了web环境的功能

最新推荐

vue项目中axios请求网络接口封装的示例代码

vue+axios实现文件下载及vue中使用axios的实例

详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题

在vue中通过axios异步使用echarts的方法

vue中Axios的封装与API接口的管理详解

全国江河水系图层shp文件包下载

管理建模和仿真的文件

Keras模型压缩与优化：减小模型尺寸与提升推理速度

MTK 6229 BB芯片在手机中有哪些核心功能，OTG支持、Wi-Fi支持和RTC晶振是如何实现的？

点云二值化测试数据集的详细解读