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格式的数据。

相关推荐
lvchaoq25 分钟前
页面停留时间过长导致token过期问题
前端
兔老大的胡萝卜26 分钟前
pm2 部署nuxt4项目
javascript·nuxt4
阿蒙Amon29 分钟前
JavaScript学习笔记:17.闭包
javascript·笔记·学习
elangyipi12329 分钟前
深入理解前端项目中的 package.json 和 package-lock.json
前端·json
Wpa.wk31 分钟前
自动化测试 - 文件上传 和 弹窗处理
开发语言·javascript·自动化测试·经验分享·爬虫·python·selenium
l1t33 分钟前
利用小米mimo为精确覆盖矩形问题C程序添加打乱函数求出更大的解
c语言·开发语言·javascript·人工智能·算法
LYFlied42 分钟前
【算法解题模板】-【回溯】----“试错式”问题解决利器
前端·数据结构·算法·leetcode·面试·职场和发展
composurext42 分钟前
录音切片上传
前端·javascript·css
程序员小寒42 分钟前
前端高频面试题:深拷贝和浅拷贝的区别?
前端·javascript·面试
狮子座的男孩1 小时前
html+css基础:07、css2的复合选择器_伪类选择器(概念、动态伪类、结构伪类(核心)、否定伪类、UI伪类、目标伪类、语言伪类)及伪元素选择器
前端·css·经验分享·html·伪类选择器·伪元素选择器·结构伪类