详细介绍：网站背景更换功能

目录

1. HTML 部分

2. JavaScript 部分

3. 完整流程

4. 总结

5. 适用场景

---

本文将介绍如何通过文件上传实现网站背景图片的更换。通过使用 JavaScript 和 Axios，我们可以允许用户上传图片文件并将其作为网站的背景图片。上传的图片 URL 会保存在浏览器的 localStorage 中，这样即使刷新页面，背景图片仍然可以保持不变。

下面是具体的实现过程以及完整的代码示例。

---

1. HTML 部分

  
    
    
    
    
  
  
    
选择一张图片更换背景
    
    
  
    
    
  

HTML 解析：

• input[type="file"]：这是一个文件选择框，用户可以通过该框选择本地图片文件。
• class="bg-ipt"：我们通过该类名在 JavaScript 中获取元素，以便给它绑定事件监听器。

---

2. JavaScript 部分

// 监听文件选择框的change事件
document.querySelector(".bg-ipt").addEventListener("change", (e) => {
  // 1. 选择图片上传，设置 body 背景
  console.log(e.target.files[0]);

  // 创建 FormData 对象，封装图片文件
  const fd = new FormData();
  fd.append("img", e.target.files[0]);

  // 发送 POST 请求到服务器，上传图片
  axios({
    url: "http://hmajax.itheima.net/api/uploadimg",  // 图片上传的 API 地址
    method: "post",
    data: fd,  // 上传的文件数据
  }).then((result) => {
    // 服务器返回结果
    console.log(result);
    
    // 从返回的数据中获取图片 URL
    const imgUrl = result.data.data.url;

    // 设置页面背景图片为上传的图片
    document.body.style.backgroundImage = `url(${imgUrl})`;

    // 2. 上传成功时，"保存"图片 URL 到 localStorage 中
    localStorage.setItem("bgImg", imgUrl);
  }).catch((error) => {
    // 错误处理
    console.error('图片上传失败:', error);
  });
});

// 3. 网页运行时，获取存储的背景图片 URL 并应用
const bgUrl = localStorage.getItem("bgImg");
if (bgUrl) {
  document.body.style.backgroundImage = `url(${bgUrl})`;
}

JavaScript 解析：

1. 监听文件选择框的变化：

   • document.querySelector(".bg-ipt").addEventListener("change", (e) => { ... })：当用户选择文件时，触发 change 事件。
   • e.target.files[0] 获取用户选择的文件。

2. 创建 FormData 对象：

   • const fd = new FormData();：通过 FormData 对象，封装要上传的文件。
   • fd.append("img", e.target.files[0]);：将文件添加到 FormData 中，键名为 'img'，对应服务器上传接口的字段名。

3. 发送 POST 请求上传图片：

   • 使用 axios 发送 POST 请求，上传图片至指定 API（本示例中为 http://hmajax.itheima.net/api/uploadimg）。
   • 请求成功后，服务器返回图片的 URL，我们将其用作页面的背景图片：document.body.style.backgroundImage = url(${imgUrl})`。

4. 保存图片 URL 到 localStorage：

   • 上传成功后，使用 localStorage.setItem("bgImg", imgUrl) 将图片的 URL 存储在本地存储中，以便页面刷新时仍能使用相同的背景图片。

5. 获取并应用背景图片：

   • 页面加载时，通过 localStorage.getItem("bgImg") 获取存储的背景图片 URL，并将其应用到页面背景：document.body.style.backgroundImage = url(${bgUrl})`。
   • 这样即使刷新页面，背景图片仍然不会丢失。

---

3. 完整流程

1. 用户点击文件选择框并选择一张图片。
2. JavaScript 通过 FormData 创建上传请求，使用 Axios 向服务器发送图片文件。
3. 服务器返回图片的 URL，JavaScript 将此 URL 设置为页面的背景。
4. 图片 URL 会被保存到 localStorage 中，确保页面刷新后背景图片依然存在。
5. 当页面加载时，JavaScript 会从 localStorage 中读取背景图片的 URL 并重新应用。

---

4. 总结

这个示例展示了如何使用 JavaScript 和 Axios 实现动态背景更换功能，并且在用户刷新页面时保持背景不变。通过 localStorage 我们能保存用户的选择，使得背景图片可以在会话中持续有效。这个功能适用于个人网站、博客、或者任何需要自定义页面外观的应用。

5. 适用场景

• 个人网站：允许用户自定义背景图片，使其更加个性化。
• 博客平台：用户可以上传并设置背景图片，提升视觉体验。
• 管理后台：管理员可以根据需求上传和更改系统背景，提升管理界面的可视化效果。

---

通过上面的代码，你可以很容易地在你的网站上实现动态背景更换功能。