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

简介

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

正文

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

script src="https://cdn.jsdelivr.net/npm/axios@1.5.0/dist/axios.min.js">/script>

1.get 请求示例

// 假设有一个查询字符串参数对象
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

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

// 创建 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:

!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带参数方式

前端代码

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 后

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 方式

@RestController
public class MyController {

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

• @RequestParam

@RestController
public class MyController {

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

3.2 请求体参数方式

前端

 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);
});
    

后端

@RestController
public class MyController {

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

4.上传/下载

4.1 文件上传

  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 文件下载

vm.$Modal.confirm({
    title: '是否确认下载',
    content: '
'+ record.fileName+ '',
    onOk: () => {

        // 创建一个隐藏的标签
        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 后端接口

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

    @Autowired
    private WebSSHProperties webSSHProperties;
服务器托管网
    @GetMapping("/server")
    @ResponseBody
    public ListSSHConfig> listServer() {
        return webSSHProperties.getServer();
    }

    private MapString, SftpClient> clientMap = new HashMap>();

    @GetMapping("/sftpFile/list")
    @ResponseBody
    public MapString, 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 + "/";
        ListSftpFileInfo> fileInfoList = sftpClient.list(parentPath);

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

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


    @PostMapping(value = "/sftpFile/upload", consumes = "multipart/*", headers = "content-type=multipart/form-data")
    @ResponseBody
    public ResponseEntitySftpFileInfo> 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提交数据的三种请求方式写法

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: BOSHIDA电源模块 电源故障管理 防止外部引起的故障

BOSHIDA电源模块 电源故障管理 防止外部引起的故障 虽然电源的首要目标是可靠地为负载提供稳定的电压，但同样重要的是，它也要能够各种恶劣环境中可靠地工作。上一节中提到的内部故障都已经得到了明确的定义，且也都有标准化的解决方法，相反，由外部引起的故障对于每个…