如何通过REST API在Phaser JS中上传本地个人资料图片

整个流程拆为三个核心环节：本地图片选取、REST API上传、资源动态注入Phaser纹理缓存，直接按以下步骤实现即可。

本地选图与上传逻辑 #

Phaser画布本身不支持原生文件选择交互，需要配合隐藏的DOM文件控件完成选图操作：

• 先在页面插入隐藏的文件选择器，限制仅可选择图片格式

<input type="file" id="avatarUpload" accept="image/*" style="display:none">

• 绑定选图回调，选中文件后组装FormData调用上传接口：

const uploadInput = document.getElementById('avatarUpload')
// 点击Phaser内的上传头像按钮时，主动触发uploadInput.click()即可唤起文件选择
uploadInput.addEventListener('change', async (e) => {
  const selectedFile = e.target.files[0]
  if (!selectedFile) return
  const formData = new FormData()
  formData.append('avatar', selectedFile)
  try {
    // 替换为自己的REST上传接口地址
    const resp = await fetch('/api/user/avatar/upload', {
      method: 'POST',
      body: formData,
      // 接口需要鉴权就加对应请求头
      // headers: { Authorization: `Bearer ${localStorage.getItem('access_token')}` }
    })
    const { avatarUrl } = await resp.json()
    // 上传成功拿到图片访问地址，加载到Phaser
    loadAvatarToGame(avatarUrl)
  } catch (err) {
    console.error('头像上传失败:', err)
  }
})

如果接口不返回在线地址，直接返回图片二进制流，可以把响应转成Blob URL使用，不需要额外存线上资源。

Phaser端图片加载逻辑 #

Phaser的纹理必须通过Loader加载进缓存后，才能作为Image/Sprite的素材使用，分两种场景处理：

预加载阶段加载历史头像 #

如果是游戏初始化前已经拿到存在本地的用户头像地址，直接在preload生命周期加入加载队列即可：

const savedAvatar = localStorage.getItem('user_avatar')
function preload() {
  // 跨域场景下加crossOrigin配置，避免纹理污染
  this.load.image('user_avatar', savedAvatar).crossOrigin = 'anonymous'
}
function create() {
  // 加载完成直接创建头像精灵
  this.add.image(200, 150, 'user_avatar').setScale(0.5)
}

运行时动态加载新头像 #

如果是游戏运行过程中用户上传了新头像，手动调用Loader动态加载，加载完成后更新已有头像纹理即可：

function loadAvatarToGame(avatarUrl) {
  // 拼接时间戳避免浏览器缓存旧头像
  const realUrl = `${avatarUrl}?t=${Date.now()}`
  // 持久化存储到本地，下次启动直接读取
  localStorage.setItem('user_avatar', realUrl)
  // 动态加载资源
  this.load.image('user_avatar', realUrl).crossOrigin = 'anonymous'
  this.load.once('complete', () => {
    // 已存在头像精灵就直接替换纹理，不存在就新建
    if (this.avatarSprite) {
      this.avatarSprite.setTexture('user_avatar')
    } else {
      this.avatarSprite = this.add.image(200, 150, 'user_avatar').setScale(0.5)
    }
  })
  // 必须手动调用start触发加载，否则不会执行资源请求
  this.load.start()
}

常见问题避坑 #

• 跨域报错：图片存储服务必须配置CORS允许游戏域名访问，同时加载时设置crossOrigin属性，否则会出现WebGL纹理污染、画布无法导出的问题
• 缓存不更新：用户更换头像后如果地址不变，一定要在url后拼接随机参数/时间戳，避免浏览器加载本地旧缓存
• 本地存储溢出：不要把图片转base64直接存在localStorage，localStorage默认容量仅5M左右，大图存入会导致存储报错，只存图片访问地址即可

参考实现效果：

内容的提问来源于stack exchange，提问作者Arslan Arshad