原生js上传图片

无样式上传图片

创建一个 FormData 对象：这个对象可以用于存储数据。

将文件添加到 FormData 对象：通过 append() 方法，将用户选择的文件添加到 formData 对象中。

使用 fetch 发送请求：使用 fetch API 或者其他方法将 FormData 对象发送到服务器。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片上传</title>
  </head>
  <body>
    <!-- 文件上传 -->
    <input type="file" id="fileInput" onchange="uploadImage()" />
    <script>
      // 上传图片的函数
      function uploadImage() {
        // 获取文件输入框元素
        const fileInput = document.getElementById("fileInput");
        // 创建formData对象，用于存储要上传的文件数据
        const formData = new FormData();
        formData.append("file", fileInput.files[0]); // 将选中的文件添加到formData对象中

        // 请求接口
        fetch("http://yikatong.kuxia.top/pc/common/upload", {
          method: "POST",
          body: formData, // 请求体是formData对象，其中包含文件数据
        })
          .then((response) => response.json()) // 服务器响应成功后，解析JSON格式的响应数据
          .then((data) => {
            console.log("上传成功:", data);
          })
          .catch((error) => {
            console.error("上传失败:", error);
          });
      }
    </script>
  </body>
</html>

有样式的上传图片

就是把图片回显的地方盖着输入框

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片上传</title>
  </head>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .box {
      display: flex;
    }
    /* 添加虚线边框 */
    #image {
      width: 100px;
      height: 100px;
      border-radius: 5px;
      margin-left: -100px;
    }
  </style>
  <body>
    <div class="box">
      <!-- 文件上传 -->
      <input
        type="file"
        id="fileInput"
        onchange="uploadImage()"
        style="height: 100px; width: 100px; opacity: 0"
      />
      <!-- 用于回显图片 -->
      <img id="image" src="/img/add.svg" />
    </div>
    <script>
      const fileInput = document.getElementById("fileInput"); // 获取上传文件框
      const image = document.getElementById("image"); // 获取回显图片框
      function uploadImage() {
        const formData = new FormData(); // 创建formData对象，用于存储要上传的文件数据
        formData.append("file", fileInput.files[0]); // 将选中的文件添加到formData对象中

        // 请求接口
        fetch("http://yikatong.kuxia.top/pc/common/upload", {
          method: "POST",
          body: formData, // 请求体是formData对象，其中包含文件数据
        })
          .then((response) => response.json()) // 服务器响应成功后，解析JSON格式的响应数据
          .then((data) => {
            console.log("上传成功:", data.data.url);
            // 回显图片
            image.src = "http://yikatong.kuxia.top" + data.data.url;
          })
          .catch((error) => {
            console.error("上传失败:", error);
          });
      }
    </script>
  </body>
</html>

原生js上传图片

无样式上传图片

有样式的上传图片

悦读