axios发送视频文件到Controller axios发送图片

转载

kekenai 2024-08-28 08:30:00

console.log(error);
        })

    使用axios发送post请求
        axios({
            method: "POST",
            url: "http://localhost/info",
            // data:{
            // username:"张三",
            // password:"123"
            // },//json数据携带格式
            data: "username=张三&password=123"//urlencoded类型的数据
        }).then(res => {
            console.log(res);
        }).catch(error => {
            console.log(error);
        })

##### 完整代码(Html代码)

Document Get请求 POST请求 AXIOS请求

//-------------------------
 //传参方式二:如果服务器不支持json类型的参数，支持urlencoded类型的参数，使用以下方式:
 axios.post(“http://localhost/info”, “username=张三&password=123”).then(res => {
 //成功后的回调函数
 console.log(res);
 }).catch(error => {
 //失败后的回调函数
 console.log(error);
 })
 }
 //--------------------------------------------------------------------------------
 function axiosclick() {
 //使用axios发送get请求
 // axios({
 // method: “GET”,//请求方式
 // url: “http://localhost/login?username=张三&password=123”,//路径
 // }).then(res => {
 // //成功的回调函数
 // console.log(res);
 // }).catch(error => {
 // //失败的回调函数
 // console.log(error);
 // })//使用axios发送post请求
 axios({
 method: “POST”,
 url: “http://localhost/info”,
 // data:{
 // username:“张三”,
 // password:“123”
 // },//json数据携带格式
 data: “username=张三&password=123”//urlencoded类型的数据
 }).then(res => {
 console.log(res);
 }).catch(error => {
 console.log(error);
 })
 }

##### 服务端代码(node.js服务端)

// npm install express --save 安装
 // npm uninstall express --save 卸载
 //导入express服务器第三方的包
 const express = require(“express”)
 //解决跨域,导入中间件cors
 const cors = require(“cors”)
 //创建服务器实例
 const app = express()
 //注册跨域中间件
 app.use(cors())
 //用来解析post请求体中的参数,把post请求的参数解析res.body
 app.use(express.urlencoded({ extended: false }))
 app.use(express.json())
 //登录请求
 app.get(“/login”, function (req, res) {
 console.log(“登录请求”, req.query);
 if (req.query.username == “张三” && req.query.password == “123”) {
 res.json({ code: 1, msg: “登陆成功” })
 } else {
 res.json({ code: 0, msg: “账号或密码错误,登陆失败” })
 }
 })//获取个人信息
 app.post(“/info”, function (req, res) {
 console.log(“获取个人信息”, req.body);
 if (req.body.username == “张三” && req.body.password == “123”) {
 res.json({ code: 1, msg: “获取成功” })
 } else {
 res.json({ code: 0, msg: “获取失败” })
 }
 })//调用listen启动服务器
 app.listen(80, function () {
 console.log(“开启了127.0.0.1服务器”);
 })

#### VUE在main.js里设置全局axios请求的配置

//下载包
npm i axios -S

**在main.js配置如下**

import axios from ‘axios’
//配置共同的端口号和域名,后期代码中直接写接口就行,例如/user,/books
axios.default.baseURL=‘请求根路径’
//在vue实例对象的原型上添加这个属性
//今后，在每个.vue组件中要发起请求，直接调用this.axios.x××
Vue.prototype.axios=axios