使用 FormData上传file文件使用接口通过FormData上传头像

文件选择标签

type="file" 属性可以获取选择文件

accept="image/*" 推荐选择图片类 /* 通配,所有

placeholder 提示信息

语法:

1. `accept`属性引导用户选择文件

1. 多个用`,`分隔

2. `image/*`，所有图片

3. 它定义了文件 input 应该接受的文件类型

2. `onchange`会在选择的文件改变时触发

3. `files`属性可以获取选择的文件

 <body>
    <!--  文件选择标签
        type="file" 属性可以获取选择文件
        accept="image/*" 推荐选择 图片类  /* 通配,所有
        placeholder 提示信息
     语法:
     1. `accept`属性引导用户选择文件
     1. 多个用`,`分隔
     2. `image/*`，所有图片
     3. 它定义了文件 input 应该接受的文件类型
     2. `onchange`会在选择的文件改变时触发
     3. `files`属性可以获取选择的文件
    -->
    <input
      type="file"
      name="avatar"
      accept="image/*"
      placeholder="请选择头像"
    />
    <script>
      // change 内容发生变化时触发
      const inpit = document.querySelector('[type="file"]');
      inpit.addEventListener("change", (e) => {
        // files[0] 上传文件的信息 文件流
        console.log(e);
        console.log(e.target);
        // 后续把相关的信息给到后端
        console.log(e.target.files[0]);
      });
    </script>
  </body>

使用接口直接通过FormData 上传头像

<body>
    <h2>直接通过FormData</h2>
    <!-- e.target.files[0] -->
    <!-- 推荐用户选择 图片 -->
    <input type="file" accept="image/*" />
    <img src="" alt="" />
    <!-- 点击按钮 上传用户选择的图片 -->
    <button>上传</button>
    <script src="./lib/axios.js"></script>

    <script>
      // 1.点击按钮上传图片
      document.querySelector("button").onclick = () => {
        // 1.1获取上传的文件、图片
        const img = document.querySelector('[type="file"]').files[0];
        // console.log(img);
        // 1.2将上传的文件存起来
        const data = new FormData();
        data.append("avatar", img);
        // console.log(data.get("avatar"));
        // 1.3发送请求 把数据增加到后端
        axios({
          method: "post",
          url: "http://ajax-api.itheima.net/api/file",
          data,
        }).then((res) => {
          console.log(res);
          // 1.4把图片显示在页面
          document.querySelector("img").src = res.data.data.url;
        });
      };
    </script>
  </body>