修改用户头像代码编写要求点击即可选择文件上传头像并且要把文件相对路径传送给后端

好的，下面是一个简单的示例代码，用于实现修改用户头像的功能：

HTML代码：

<input type="file" id="avatar-input">
<button onclick="uploadAvatar()">上传头像</button>

JavaScript代码：

function uploadAvatar() {
  // 获取用户选择的文件
  const file = document.getElementById("avatar-input").files[0];
  // 创建FormData对象，用于发送文件数据
  const formData = new FormData();
  formData.append("avatar", file, file.name);
  // 发送HTTP请求
  const xhr = new XMLHttpRequest();
  xhr.open("POST", "/upload-avatar");
  xhr.send(formData);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 上传成功，更新用户头像
      const avatarUrl = xhr.responseText;
      document.getElementById("avatar").src = avatarUrl;
    }
  }
}

上述代码中，我们使用了HTML5中的input元素，设置其type属性为file，让用户可以选择本地文件。当用户点击“上传头像”按钮时，会触发uploadAvatar函数。该函数首先获取用户选择的文件，然后创建一个FormData对象，将文件数据添加到该对象中。接着，使用XMLHttpRequest对象发送一个POST请求，将FormData对象发送给后端。

后端代码（使用Node.js和Express框架）：

const express = require("express");
const app = express();

app.post("/upload-avatar", (req, res) => {
  // 保存上传的文件
  const file = req.files.avatar;
  const path = "uploads/" + file.name;
  file.mv(path, (err) => {
    if (err) {
      console.log(err);
      res.status(500).send("上传失败");
    } else {
      // 返回文件的相对路径
      res.send(path);
    }
  });
});

app.listen(3000, () => {
  console.log("服务器已启动");
});

上述代码中，我们使用Express框架创建了一个HTTP服务器，监听3000端口。当客户端向服务器发送一个POST请求，路径为“/upload-avatar”时，会触发一个回调函数。该函数首先从请求中获取上传的文件数据，然后将文件保存到本地的“uploads”目录下，并返回文件的相对路径。