from文件上传(扩展 FormData 的使用)提交 (扩展ref用法) forin用法 forin和 forof区别

最新推荐文章于 2024-08-20 15:07:31 发布

All rivers run in to the sea

最新推荐文章于 2024-08-20 15:07:31 发布

阅读量776

点赞数 1

分类专栏：其他参考文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_43944285/article/details/124923514

版权

这篇博客介绍了如何使用FormData进行文件上传，包括自定义文件上传按钮的实现。还探讨了在JavaScript中for...in和for...of迭代方法的不同，并提供了英雄管理案例作为应用场景，涉及Vue组件间的交互和文件预览功能。

摘要由CSDN通过智能技术生成

from表单上传 (图片,头像 ) 看文档转换

更换头像

 /*  onIptChange (e) {
                   //  console.dir(e.target)
                   if (e.target.files.length === 0) {
                     // 没有图片
                     this.avatar = ''
                   } else {
                     // 选择了一张图片   图片对象--> base64 格式的字符串
                     // e.target.files[0]
                     // 1. new dileReader() 文件读取器(浏览器自带的)
                     const reader = new FileReader()
                     // 2.读取图片对象
                     reader.readAsDataURL(e.target.files[0])
                     // 3. 监听onload文件读取完毕事件
                     reader.onload = () => {
                     //   console.log(reader.result)
                     // 头像预览赋值
                       this.avatar = reader.result
                     }
                   }
                 }, */

001 FormData用法

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

创建一个空对象

var formData = new FormData();//通过append方法添加数据

使用表单初始化对象

//表单示例
<form id="myForm" action="" method="post">
    <input type="text" name="name">名字
    <input type="password" name="psw">密码
    <input type="submit" value="提交">
</form>
 
//方法示例
// 获取页面已有的一个form表单
var form = document.getElementById("myForm");
// 用表单来初始化
var formData = new FormData(form);
// 我们可以根据name来访问表单中的字段
var name = formData.get("name"); // 获取名字
var psw = formData.get("psw"); // 获取密码
// 当然也可以在此基础上，添加其他数据
formData.append("token","kshdfiwi3rh");

//文件上传必须要FormData对象 ： 因为文件数据 和 文本数据 在传输的时候，数据格式不同。需要formdata对象进行自动处理。

获取值

//通过get(key)/getAll(key)来获取对应的value
formData.get("name"); // 获取key为name的第一个值
formData.get("name"); // 返回一个数组，获取key为name的所有值

添加数据

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

获取的值

formData.get("k1"); // "v1"
formData.getAll("k1"); // ["v1","v2","v3"]

判断是否存在对应的数据



//has(key)来判断是否对应的key值
formData.append("k1", "v1");
formData.append("k2",null);
 
formData.has("k1"); // true
formData.has("k2"); // true
formData.has("k3"); // false

删除数据

//delete(key)删除数据
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.delete("k1");
 
formData.getAll("k1"); // []

由于此接口涉及到文件上传的功能，因此提交的请求体，必须是 FormData 格式！
导入图片 —>通过ref属性获取 dom树上面的标签
获取vue 框架的页面dom 元素，还可以拿到注册的组件实例，也是父组件获取了子组件的值和方法！！！

## 1.1-文件上传思路

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"