Vue文件上传,全网最详细!
2022/6/11 4:20:03
本文主要是介绍Vue文件上传,全网最详细!,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
关于在vue中上传文件,详细内容如下:
fileLoad() {
//利用formdata表单对象转换
//获取到选中的文件
file = document.querySelector("#file").files[0]; //拿到选择的文件
//创建formdata对象 将文件存储在formdata对象中
var formdata = new FormData();
formdata.append("file", file);
//由于我们传formdata数据会占用整个传参对象,详情请看下面axios传参方式
//但是有时候需求还需要传其他的参数怎么办呢,我们可以将其他参数继续append进formdata对象中
//例如我们额外传一个参数test,值为测试
formdata.append('test','测试')
//这样我们formdata对象中就有两个字段 一个字段file 值对应的是文件对象,一个字段test 值对应的是测试
//只要formdata传送给后端,那么文件对象和测试 这两个值都会一起携带过去传给后端,后端会有中间件或者插件,解析formdata对象中的file文件对象将其单独拿出来,其他字段也可以单独提炼出来
//其实你可以想象formdata就是一个普通存放数据的对象{file:文件对象,test:'测试'}里面有一个属性对应文件对象,一个属性对应测试。然后将这个对象传给后端。后端负责从这个对象识别文件对象并获取。当然真实formdata并不是这种结构这里只是方便理解。因为我们传文件不能使用普通的对象传过去,只能将其放在formdata对象中传过去。
const config = {
headers: { "Content-Type": "multipart/form-data" }, //跟后端约定发送的数据类型为form-data对象类型
};
//调用接口上传文件
axios({
url:'http://localhost:3030/api/reg',
method:'post',
data:formdata, //我们传formdata会占用整个传参对象
headers:config.headers
}).then(res=>{
console.log(res)
})
},
这篇关于Vue文件上传,全网最详细!的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2025-01-04React 19 来了!新的编译器简直太棒了!
- 2025-01-032025年Node.js与PHP大比拼:挑选最适合的后端技术进行现代web开发
- 2025-01-03?? 用 Gemini API、Next.js 和 TailwindCSS 快速搭建 AI 推文生成项目 ??
- 2024-12-31Vue CLI多环境配置学习入门
- 2024-12-31Vue CLI学习入门:一步一步搭建你的第一个Vue项目
- 2024-12-31Vue3公共组件学习入门:从零开始搭建实用组件库
- 2024-12-31Vue3公共组件学习入门教程
- 2024-12-31Vue3学习入门:新手必读教程
- 2024-12-31Vue3学习入门:初学者必备指南
- 2024-12-30Vue CLI多环境配置教程:轻松入门指南