axios get/post/delete上传下载及springboot后端示例

张三疯不疯2023-10-10 14:32

axios使用总结

  • 简介
  • 正文
    • [1.get 请求示例](#1.get 请求示例)
    • [2.post 请求示例](#2.post 请求示例)
      • [2.1 JSON 格式数据(最常用)](#2.1 JSON 格式数据(最常用))
      • [2.2 FormData 数据格式（用于上传文件等场景）](#2.2 FormData 数据格式（用于上传文件等场景）)
      • [2.3 x-www-form-urlencoded 数据格式(比较少用)](#2.3 x-www-form-urlencoded 数据格式(比较少用))
      • [3.4 知识点: multipart/form-data 和 application/x-www-form-urlencoded 有什么区别和联系](#3.4 知识点: multipart/form-data 和 application/x-www-form-urlencoded 有什么区别和联系)
    • [3. delete 请求示例](#3. delete 请求示例)
    • 4.上传/下载
      • [4.1 文件上传](#4.1 文件上传)
      • [4.2 文件下载](#4.2 文件下载)
      • [4.3 后端接口](#4.3 后端接口)
  • 参考文档

简介

记录axios各种使用方法,包括get/post/delete上传下载多种写法及springboot后端示例

正文

以下示例基于浏览器环境,直接使用html直接引入axios资源

javascript 复制代码 
<script src="https://cdn.jsdelivr.net/npm/axios@1.5.0/dist/axios.min.js"></script>

1.get 请求示例

javascript 复制代码 
// 假设有一个查询字符串参数对象
const params = {
  key1: 'value1',
  key2: 'value2'
};

axios.get('/api/data', {
  params: params
})
.then(response => {
  console.log('Data:', response.data);
})
.catch(error => {
  console.error('Error:', error);
});

2.post 请求示例

三种类型的Content-Type 请求方式

2.1 JSON 格式数据(最常用)

  • Content-Type: application/json
javascript 复制代码 
import axios from 'axios'
let data = {"code":"1234","name":"yyyy"};
axios.post(`${this.$url}/test/testRequest`,data)
.then(res=>{
    console.log('res=>',res);            
})

2.2 FormData 数据格式（用于上传文件等场景）

  • Content-Type: multipart/form-data
javascript 复制代码 
// 创建 FormData 对象并添加数据
const formData = new FormData();
formData.append('file', file); // 假设 file 是一个文件对象
formData.append('path', '/root/tmp') // 文本字段
axios.post('/api/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
.then(response => {
  console.log('Response:', response.data);
})
.catch(error => {
  console.error('Error:', error);
});

2.3 x-www-form-urlencoded 数据格式(比较少用)

  • Content-Type: application/x-www-form-urlencoded

示例1:

javascript 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POST Request with x-www-form-urlencoded</title>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/qs/dist/qs.js"></script>

    <script>
        function sendData() {
            const data = {
                key1: 'value1',
                key2: 'value2'
            };

            // 转换为 x-www-form-urlencoded 格式
            const formData = qs.stringify(data);

            // 发送 POST 请求
            axios.post('/api/data', formData, {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            })
            .then(response => {
                console.log('Response:', response.data);
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }

        // 调用函数发送数据
        sendData();
    </script>
</body>

</html>

3.4 知识点: multipart/form-data 和 application/x-www-form-urlencoded 有什么区别和联系

ultipart/form-data 和 application/x-www-form-urlencoded 都是常见的 POST 请求数据提交方式，它们在数据格式上有一些区别和使用场景上的差异

特点 application/x-www-form-urlencoded multipart/form-data
数据格式 键值对形式（key-value pairs），使用 & 和 = 连接 多部分数据，每部分有唯一的边界标识（boundary）
适用场景 简单文本数据 上传文件、包含大量文本数据、二进制数据
数据编码 文本数据会被编码（URL-encoded） 二进制数据直接传输，不编码
用途 适用于表单提交、简单文本数据传输等 适用于上传文件、图像、视频等二进制数据传输
性能 对文本数据编码，可能导致数据变得冗长 直接传输二进制数据，更高效
示例 key1=value1&key2=value2 多部分数据，每部分包含字段名、字段值、边界标识等

区别和联系：

  • 数据格式： application/x-www-form-urlencoded 是以简单的键值对形式传输数据，而 multipart/form-data 允许传输更复杂的数据结构，包括文件和其他二进制数据。

  • 性能： application/x-www-form-urlencoded 对文本数据进行编码，可能会导致数据变得冗长，而 multipart/form-data 可以直接传输二进制数据，更高效。

  • 用途： application/x-www-form-urlencoded 适用于简单文本数据的传输，而 multipart/form-data 适用于文件上传和传输包含大量文本数据的场景。

在实际应用中，选择合适的格式取决于数据类型和需求。如果你需要传输文件或其他二进制数据，使用 multipart/form-data 格式。如果只需要传输简单的文本数据，application/x-www-form-urlencoded 格式通常足够了。

3. delete 请求示例

当发送 DELETE 请求时，你可以在 URL 中包含参数，也可以将参数放在请求体中。以下是带有参数的 DELETE 请求示例

3.1 url带参数方式

前端代码
javascript 复制代码 
const axios = require('axios');

// 发送带有 URL 参数的 DELETE 请求
axios.delete('/api/resource?id=123')
.then(response => {
  console.log('Response:', response.data);
})
.catch(error => {
  console.error('Error:', error);
});

有时候多个请求参数需要手动拼接参数可读性较差,写起来也麻烦.也可以使用params参数来替代，传递一个对象Axios 会自动将其拼接到 URL 后

javascript 复制代码 
const axios = require('axios');

const id = 123;

axios.delete('/api/resource', {
  params: {
    id: id
  }
})
.then(response => {
  console.log('Response:', response.data);
})
.catch(error => {
  console.error('Error:', error);
});
后端代码

带有URL参数的DELETE请求处理（使用@PathVariable或@RequestParam）

  • @PathVariable 方式
java 复制代码 
@RestController
public class MyController {

    @DeleteMapping("/api/resource/{id}")
    public ResponseEntity<String> deleteResourceById(@PathVariable Long id) {
        // 处理逻辑...
        return ResponseEntity.ok("Resource with ID " + id + " deleted successfully");
    }
}
  • @RequestParam
java 复制代码 
@RestController
public class MyController {

    @DeleteMapping("/api/resource")
    public ResponseEntity<String> deleteResourceById(@RequestParam Long id) {
        // 处理逻辑...
        return ResponseEntity.ok("Resource with ID " + id + " deleted successfully");
    }
}

3.2 请求体参数方式

前端
javascript 复制代码 
 const axios = require('axios');

// 发送带有请求体参数的 DELETE 请求
const data = {
  id: 123
};

axios.delete('/api/resource', {
  data: data
})
.then(response => {
  console.log('Response:', response.data);
})
.catch(error => {
  console.error('Error:', error);
});
后端
java 复制代码 
@RestController
public class MyController {

    @DeleteMapping("/api/resource")
    public ResponseEntity<String> deleteResource(@RequestBody DeleteRequest deleteRequest) {
        Long id = deleteRequest.getId();
        // 处理逻辑...
        return ResponseEntity.ok("Resource with ID " + id + " deleted successfully");
    }
}

4.上传/下载

4.1 文件上传

javascript 复制代码 
  beforeUpload(file) {
      var vm = this
      // 将文件添加到请求数据中
      const formData = new FormData();
      formData.append('file', file);
      formData.append('remoteDirectory', this.sftp.upload.form.path);
      formData.append('serverName', this.serverAttribute.currentServer)

      axios.post(this.sftp.upload.url, formData, {
              // 监听文件上传进度
              onUploadProgress: (progressEvent) => {
                  const { loaded, total } = progressEvent;
                  const progress = Math.round((loaded / total) * 100);
                  console.log(`Upload Progress: ${progress}%`);
                  vm.sftp.upload.uploading = true;
                  vm.sftp.upload.uploadProgress = progress;
              },

          })
          .then(response => {
              console.log('File uploaded successfully', response);
              vm.loadSftpFile(this.serverAttribute.currentServer, this.sftp.upload.form.path);
              // 重置进度条状态
              vm.sftp.upload.uploading = false
              vm.sftp.upload.uploadProgress = 0
          })
          .catch(error => {
              console.error('Error uploading file', error);
          });

      return false; // 阻止默认上传行为
  }

4.2 文件下载

javascript 复制代码 
vm.$Modal.confirm({
    title: '是否确认下载',
    content: '<p>'+ record.fileName+ '</p>',
    onOk: () => {

        // 创建一个隐藏的<a>标签
        const link = document.createElement('a');
        link.href = vm.baseUrl + '/web-ssh/sftpFile/download?serverName=' + vm.serverAttribute.currentServer + '&remoteFilePath=' + this.sftp.upload.form.path + '/' + record.fileName;
        // 设置下载属性，以便浏览器弹出下载对话框
        link.setAttribute('download', record.simpleObjectName);
        // 模拟点击事件来触发下载
        link.click();
    },
    onCancel: () => {
        //this.$Message.info('Clicked cancel');
    }
});

4.3 后端接口

java 复制代码 
@Controller
@RequestMapping("/web-ssh")
public class WebSShController {
    private static final Logger LOGGER = LoggerFactory.getLogger(WebSShController.class);

    @Autowired
    private WebSSHProperties webSSHProperties;

    @GetMapping("/server")
    @ResponseBody
    public List<SSHConfig> listServer() {
        return webSSHProperties.getServer();
    }

    private Map<String, SftpClient> clientMap = new HashMap<>();

    @GetMapping("/sftpFile/list")
    @ResponseBody
    public Map<String, Object> listSftpFileInfo(String serverName, String parentPath) throws SftpException {
        SftpClient sftpClient = clientMap.get(serverName);
        if (sftpClient == null) {
            sftpClient = new SftpClient(webSSHProperties.getSshInfo(serverName));
            clientMap.put(serverName, sftpClient);
            sftpClient.connection();
        }

        // 获取sftp连接
        parentPath = parentPath.endsWith("/") ? parentPath: parentPath + "/";
        List<SftpFileInfo> fileInfoList = sftpClient.list(parentPath);

        // 模拟使用池化的对象不关闭
        //sftpClient.close();

        Map<String, Object> result = new HashMap<>();
        result.put("data", fileInfoList);
        return result;
    }


    @PostMapping(value = "/sftpFile/upload", consumes = "multipart/*", headers = "content-type=multipart/form-data")
    @ResponseBody
    public ResponseEntity<SftpFileInfo> uploadFile(String serverName, @RequestParam("file") MultipartFile file, String remoteDirectory) throws Exception {
        remoteDirectory = remoteDirectory.endsWith("/") ? remoteDirectory: remoteDirectory + "/";
        SftpClient sftpClient = new SftpClient(webSSHProperties.getSshInfo(serverName));
        sftpClient.connection();

        String remoteFileName = file.getOriginalFilename();
        // 上传文件到远程主机
        InputStream inputStream = file.getInputStream();
        sftpClient.upload(inputStream, remoteDirectory, remoteFileName);
        sftpClient.close();
        return ResponseEntity.ok(null);
    }


    @GetMapping(value = "/sftpFile/download", produces = {MediaType.APPLICATION_OCTET_STREAM_VALUE})
    public void downloadFile(String serverName, HttpServletResponse response, String remoteFilePath) throws Exception {
        String fileName = remoteFilePath.substring(remoteFilePath.lastIndexOf('/') + 1);
        LOGGER.info("[web-ssh] sftp download file[{}] from[{}]", remoteFilePath, serverName);
        response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));

        SftpClient sftpClient = new SftpClient(webSSHProperties.getSshInfo(serverName));
        sftpClient.connection();
        // 获取远程文件内容
        try (InputStream remoteFileInputStream = sftpClient.download(remoteFilePath);
             OutputStream outputStream = response.getOutputStream()) {
            IOUtils.copy(remoteFileInputStream, outputStream);
        }
        sftpClient.close();
    }

}

参考文档

  1. axios POST提交数据的三种请求方式写法
相关推荐
Jiaberrr1 分钟前
前端实战：使用JS和Canvas实现运算图形验证码（uniapp、微信小程序同样可用)
前端·javascript·vue.js·微信小程序·uni-app
everyStudy26 分钟前
JS中判断字符串中是否包含指定字符
开发语言·前端·javascript
城南云小白26 分钟前
web基础+http协议+httpd详细配置
前端·网络协议·http
前端小趴菜、26 分钟前
Web Worker 简单使用
前端
web_learning_32129 分钟前
信息收集常用指令
前端·搜索引擎
Ylucius35 分钟前
动态语言？ 静态语言？ ------区别何在？java，js，c，c++，python分给是静态or动态语言？
java·c语言·javascript·c++·python·学习
tabzzz37 分钟前
Webpack 概念速通：从入门到掌握构建工具的精髓
前端·webpack
200不是二百1 小时前
Vuex详解
前端·javascript·vue.js
滔滔不绝tao1 小时前
自动化测试常用函数
前端·css·html5
LvManBa1 小时前
Vue学习记录之三（ref全家桶）
javascript·vue.js·学习
热门推荐
01软件工程从理论到实践客观题汇总(头歌第一章至第八章)02RAG 实践- Ollama+RagFlow 部署本地知识库032024年高教社杯数学建模国赛C题超详细解题思路分析04【halcon】halcon字符识别——OCR05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提072024年网络安全比赛--系统渗透测试（超详细）08苍穹外卖面试总结09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10分享几个惊艳的 Three.js 个人站点