axios中qs用法

一、什么时候需要用qs进行序列化:

axios默认的content-type是application/json,即json格式,后台可以使用字符串进行接收,然后再解析即可:
默认(不使用qs):
发送请求:
export const getOutList = params => {
    return service.post(launchReciveApiConfig.getOutList, params);
}


后台接收:使用字符串接收后,通过json方法获取需要数据即可
@PostMapping("/getOutList")
@ResponseBody
public AjaxResult getOutList(@RequestBody String params) {
    Map map = JSONObject.parseObject(params);
    String name = map.get("name").toString();
    //...
}


传递的数据格式如下(json格式):
{
    name:xxx,
    age:xxx
}

使用qs.stringify解析后,content-type是application/x-www-form-urlencoded,即form表单格式,后台可以使用实体进行接收:

使用qs:将数据序列化成url格式
发送请求:
export const editOut = params => {
    return service.post(launchReciveApiConfig.editOut, qs.stringify(params));
}


后台接收:使用TOut实体类接收即可
@PostMapping("/editOut")
@ResponseBody
public AjaxResult editOut(TOut tOut) {
    //...
}


传递的数据格式如下(form表单格式):
name:xxx&age:xxx
所以,实际上是否需要用qs去序列化参数完全取决于后端要怎么接受数据。

二、qs.parse方法:

qs.parse()将URL解析成对象的形式;
let url = 'name:xxx&age:xxx'
console.log(qs.parse(url));
输出:
{
    name:xxx,
    age:xxx
}

三、qs处理数组及springBoot后台接收

参考:https://blog.csdn.net/pifutan/article/details/86320705

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
断点续传是指在文件上传过程,如果因为网络或其他原因导致上传断,可以在断的位置继续上传,而不需要重新上传整个文件。下面是使用 Vue + Element + Axios + qs 实现断点续传的步骤: 1. 安装 Element 和 Axios ``` npm install element-ui axios --save ``` 2. 创建上传组件 在 Vue 的组件,使用 Element 的上传组件和 Axios 进行文件上传。首先,我们需要在模板添加一个上传组件: ```html <el-upload class="upload-demo" ref="upload" :action="uploadUrl" :data="uploadData" :file-list="fileList" :auto-upload="false" :on-success="handleSuccess" :on-error="handleError" > <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> ``` 其,`uploadUrl` 是上传接口的地址,`uploadData` 是上传接口的参数,`fileList` 是上传的文件列表,`handleSuccess` 和 `handleError` 是上传成功和失败的回调函数。 3. 实现上传方法 在 Vue 的方法,实现文件上传的方法: ```javascript submitUpload() { this.$refs.upload.submit(); }, handleSuccess(response, file, fileList) { // 处理上传成功的逻辑 }, handleError(err, file, fileList) { // 处理上传失败的逻辑 } ``` 在 `submitUpload` 方法,调用上传组件的 `submit` 方法进行文件上传。在 `handleSuccess` 方法,处理上传成功的逻辑,包括显示上传成功的提示信息、更新文件列表等。在 `handleError` 方法,处理上传失败的逻辑,包括显示上传失败的提示信息、更新文件列表等。 4. 实现断点续传 要实现断点续传,需要在上传组件添加 `before-upload` 和 `on-progress` 事件,分别处理上传前和上传的逻辑。在 `before-upload` 事件,检查文件是否已经上传过,如果上传过,就设置上传的起点为上次上传结束的位置,否则上传整个文件。在 `on-progress` 事件,更新上传进度。 ```html <el-upload class="upload-demo" ref="upload" :action="uploadUrl" :data="uploadData" :file-list="fileList" :auto-upload="false" :before-upload="beforeUpload" :on-progress="onProgress" :on-success="handleSuccess" :on-error="handleError" > ``` ```javascript beforeUpload(file) { // 判断文件是否已经上传过 if (localStorage.getItem(file.name)) { // 设置上传的起点为上次上传结束的位置 this.uploadData.start = JSON.parse(localStorage.getItem(file.name)).end; } else { // 上传整个文件 this.uploadData.start = 0; } }, onProgress(event, file, fileList) { // 更新上传进度 const progress = Math.round((event.loaded / event.total) * 100); this.$set(file, "progress", progress); } ``` 在 `before-upload` 事件,使用 `localStorage` 存储文件上传结束位置,以便下次继续上传。在 `on-progress` 事件,计算上传进度并更新文件列表对应文件的进度。 5. 实现暂停上传和恢复上传 要实现暂停上传和恢复上传,可以在上传组件添加两个按钮,分别用于暂停和恢复上传。在暂停上传时,保存上传进度并止上传。在恢复上传时,从上次保存的上传进度开始上传。 ```html <el-upload ... > <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button> <el-button size="small" type="warning" v-show="!isUploading" @click="resumeUpload">恢复上传</el-button> <el-button size="small" type="danger" v-show="isUploading" @click="pauseUpload">暂停上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> ``` ```javascript data() { return { isUploading: false, uploadProgress: 0 }; }, methods: { submitUpload() { this.$refs.upload.submit(); this.isUploading = true; }, pauseUpload() { this.$refs.upload.abort(); this.isUploading = false; }, resumeUpload() { this.$refs.upload.submit(); this.isUploading = true; }, beforeUpload(file) { ... }, onProgress(event, file, fileList) { ... this.uploadProgress = progress; file.progress = progress; } } ``` 在 Vue 的数据,添加 `isUploading` 和 `uploadProgress` 两个变量,分别表示上传状态和上传进度。在方法,实现暂停上传和恢复上传的逻辑,使用 `isUploading` 变量控制按钮的显示。在 `before-upload` 和 `on-progress` 事件,更新上传状态和上传进度。 6. 完整代码 ```html <template> <div> <el-upload class="upload-demo" ref="upload" :action="uploadUrl" :data="uploadData" :file-list="fileList" :auto-upload="false" :before-upload="beforeUpload" :on-progress="onProgress" :on-success="handleSuccess" :on-error="handleError" > <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button> <el-button size="small" type="warning" v-show="!isUploading" @click="resumeUpload">恢复上传</el-button> <el-button size="small" type="danger" v-show="isUploading" @click="pauseUpload">暂停上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> </div> </template> <script> import { Upload, Button } from "element-ui"; import axios from "axios"; import qs from "qs"; export default { name: "UploadComponent", components: { "el-upload": Upload, "el-button": Button }, data() { return { isUploading: false, uploadProgress: 0, uploadUrl: "/upload", uploadData: { start: 0 }, fileList: [] }; }, methods: { submitUpload() { this.$refs.upload.submit(); this.isUploading = true; }, pauseUpload() { this.$refs.upload.abort(); this.isUploading = false; }, resumeUpload() { this.$refs.upload.submit(); this.isUploading = true; }, beforeUpload(file) { if (localStorage.getItem(file.name)) { this.uploadData.start = JSON.parse(localStorage.getItem(file.name)).end; } else { this.uploadData.start = 0; } }, onProgress(event, file, fileList) { const progress = Math.round((event.loaded / event.total) * 100); this.uploadProgress = progress; file.progress = progress; localStorage.setItem( file.name, JSON.stringify({ end: this.uploadData.start + event.loaded }) ); }, handleSuccess(response, file, fileList) { this.fileList = fileList; this.isUploading = false; localStorage.removeItem(file.name); this.$message({ message: "上传成功", type: "success" }); }, handleError(err, file, fileList) { this.fileList = fileList; this.isUploading = false; this.$message.error("上传失败"); } } }; </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值