request payload => formdata

request payload



 

 

formdata



 

 



这样的post提交,默认是request payload

后台无法取得post的参数username, password

 

解决方案是设置 http request的 header

设置 Content-Type 为application/x-www-form-urlencoded

app.config(['$httpProvider',
    function($httpProvider){
        $httpProvider.defaults.headers.post = {'Content-Type':'application/x-www-form-urlencoded'};
        $httpProvider.defaults.transformRequest = function(obj){
            var str = [];
            for(var p in obj)
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
            return str.join("&");
        }
    }]);

 

 

 

### Vue3 中封装文件上传请求 为了在 Vue3 项目中实现文件上传功能,通常会基于 `axios` 或者框架自带的网络请求库进行二次封装。下面展示一种利用 `axios` 进行文件上传请求的方法。 #### 创建 Axios 实例 首先定义一个通用的 Axios 请求实例,这一步骤允许统一管理全局配置,比如基础 URL、超时时间以及默认头部信息等[^2]: ```javascript import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000, }); ``` #### 处理请求拦截器 接着添加请求拦截器来处理每次发送前的数据预加工工作,例如加入身份验证令牌或换数据格式: ```javascript service.interceptors.request.use( config => { // 可在此处添加 token 验证或其他公共参数 return config; }, error => Promise.reject(error) ); ``` #### 定义文件上传函数 针对文件上传场景特别定制化服务端交互方式。这里假设服务器期望接收 multipart/form-data 类型的内容,则需构建 FormData 对象作为 payload 并指定 Content-Type 不要自动设置为 application/json : ```javascript export function uploadFile(file, onProgress) { let formData = new FormData(); formData.append('file', file); return service.post('/upload', formData, { headers: {'Content-Type': 'multipart/form-data'}, onUploadProgress: progressEvent => { if (onProgress && typeof(onProgress)=='function') { onProgress(progressEvent); } } }); } ``` 此段代码实现了简单的文件上传逻辑,并提供了进度回调机制以便实时更新 UI 显示当前传输状态[^1]。 对于更复杂的业务需求如断点续传或多线程并发上传等功能则可能涉及到额外的技术选型和服务端支持,在上述基础上做进一步扩展即可满足大部分应用场景下的文件上传操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值