vue request 发送formdata

在Vue中,你可以使用axios库来发送包含FormData的请求。以下是一个简单的例子:

首先,确保你已经安装了axios:

cpp 复制代码
npm install axios

然后,你可以使用axios发送FormData,例如:

cpp 复制代码
import axios from 'axios';
 
// 创建FormData对象
let formData = new FormData();
formData.append('key1', 'value1');
formData.append('file', yourFile); // 你的文件对象
 
// 发送请求
axios.post('/your-api-endpoint', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
.then(response => {
  // 处理响应
  console.log(response.data);
})
.catch(error => {
  // 处理错误
  console.error(error);
});

在这个例子中,your-api-endpoint是你的API端点,key1和value1是表单数据中的键值对,yourFile是你想要上传的文件。

请注意,当你使用FormData时,你通常不需要设置Content-Type为application/json,因为FormData的默认Content-Type是multipart/form-data。如果你的后端期望JSON数据,你可能需要改变Content-Type为application/json并发送JSON格式的数据。

相关推荐
snows_l几秒前
JavaScript 性能优化实战大纲
前端
asfdsfgas8 分钟前
Angular CDK 响应式工具实操指南:自适应布局构建技巧
javascript·ecmascript·angular.js
文心快码BaiduComate13 分钟前
文心快码3.5S开发古风射覆小游戏,它帅到我了!
前端·后端·程序员
CptW23 分钟前
Vue3 的“批量渲染”机制
vue.js·面试
计算机学姐35 分钟前
基于SpringBoo+Vue的医院预约挂号管理系统【个性化推荐算法+可视化统计】
java·vue.js·spring boot·mysql·intellij-idea·mybatis·推荐算法
佛系菜狗1 小时前
防抖和节流-防抖鸿蒙版本实现
前端
计算机学姐1 小时前
基于微信小程序的奶茶店点餐平台【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
不一样的少年_1 小时前
老板问我:AI真能一键画广州旅游路线图?我用 MCP 现场开图
前端·人工智能·后端
东方石匠1 小时前
Javascript常见面试题
前端·javascript·面试
恋猫de小郭1 小时前
Flutter 也有类 React Flow 的节点流程编辑器,快来了解下刚刚开源的 vyuh_node_flow
android·前端·flutter