2024年最全Vue 和 HTML FormData配合axios或ajax上传文件，提交表单数据，2024年最新前端面试必备

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

//根据id获取表单

var form = $(“#fromCont”);

//初始化实例

var formData = new FormData(form);

// 获取content内容

var content= formData.get(“content”);

//通过append() 方法向对象中添加content键值对

formData.append(“content”,content);

二、操作方法：

---

formData里面存储的数据形式，一对key/value组成一条数据，key是唯一的，一个key可能对应多个value。如果是使用表单初始化，每一个表单字段对应一条数据，它们的HTML name属性即为key值，它们value属性对应value值。

1、获取值

//通过get(key)/getAll(key)来获取对应的value

formData.get(“value”);

2、添加数据

//通过append(key, value)来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾

formData.append(“key1”, “value1”);

formData.append(“key2”, “value2”);

formData.append(“key2”, “value3”);

//获取key1

formData.get(“key1”); //返回 “value1”

formData.get(“key2”); //返回 “value2”

formData.getAll(“key2”); //返回 [‘value2’,‘value3’]

3、设置、修改数据

//通过set(key, value)来设置修改数据，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值。

formData.append(“key1”, “value1”);

formData.set(“key1”, “value2”);

//获取key1

formData.get(“key1”); //返回 “value2”

4、删除数据

//通过delete(key)，来删除数据

formData.append(“key1”, “value1”);

formData.delete(“k1”);

//获取key1

formData.get(“key1”); //返回 []

5、判断数据的存在

//通过has(key)来判断是否对应的key值,如果有对应的key值就返回true,如果没有则返回false

formData.append(“key1”, “value1”);

formData.has(“key1”); // true

formData.has(“key2”); // false

三、vue上传文件

---

//上传文件的input，type设置为file

<input type=“file” ref=“fileId” @change=“getFile”>

四、HTML中上传文件

---

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

[外链图片转存中…(img-cHgC2TcL-1715654991042)]

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

[外链图片转存中…(img-FESzRJ5B-1715654991043)]