使用npm imgur上传图片时如何展示无需重载页面的加载提示？

核心问题解答 #

1. imgur.uploadFile 是否有对应回调方法？ #

官方提供的imgur.uploadFile仅支持Promise风格调用，没有内置回调参数，你可以直接通过then/catch或者async/await语法在异步流程的不同阶段插入自定义逻辑，和回调的使用效果完全一致。

2. 能否结合flash、ejs实现无刷新弹窗需求？ #

不推荐该方案：

• Flash技术已经被所有主流浏览器正式弃用，不存在使用价值
• ejs是服务端渲染模板，常规的flash消息是服务端渲染页面时注入的提示信息，需要页面重载或跳转才能生效，无法满足你要的无刷新弹窗需求

无刷新的弹窗效果需要前端浏览器侧的逻辑触发，仅靠后端代码无法实现

具体实现步骤 #

你需要通过「前端触发上传前提示→后端执行上传逻辑→前端接收响应关闭提示」的流程实现需求，参考代码如下：

后端Node.js路由改造（补充错误处理和返回值） #

// 示例为express框架的POST路由，你可以替换为自己用的框架逻辑
app.post('/upload-image', async (req, res) => {
  try {
    // 替换为你实际获取上传文件的逻辑
    const json = await imgur.uploadFile(`myFile.jpeg`)
    // 上传成功返回成功响应
    res.json({
      success: true,
      imgUrl: json.data.link,
      msg: '上传成功'
    })
  } catch (err) {
    console.error('上传失败', err)
    // 上传失败返回错误响应
    res.json({
      success: false,
      msg: '图片上传失败，请重试'
    })
  }
})

前端ejs模板+JS逻辑 #

<!-- 上传中提示弹窗结构，写在ejs模板里即可，默认隐藏 -->
<div id="uploadLoading" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 999;">
  图片上传中，请稍候...
</div>
<!-- 你的文件选择控件 -->
<input type="file" id="imgUpload" accept="image/*">

// 前端交互逻辑
const uploadInput = document.getElementById('imgUpload')
const loadingToast = document.getElementById('uploadLoading')

uploadInput.addEventListener('change', async (e) => {
  const file = e.target.files[0]
  if (!file) return
  // 上传前先显示加载提示
  loadingToast.style.display = 'flex'

  // 组装表单数据提交给后端
  const formData = new FormData()
  formData.append('image', file)

  try {
    const res = await fetch('/upload-image', {
      method: 'POST',
      body: formData
    })
    const result = await res.json()
    if (result.success) {
      alert(`上传成功，图片地址：${result.imgUrl}`)
      // 这里可以添加你的后续业务逻辑，比如把图片地址存入表单
    } else {
      alert(result.msg)
    }
  } catch (err) {
    alert('网络请求失败，请重试')
  } finally {
    // 无论上传成功/失败，都关闭加载提示
    loadingToast.style.display = 'none'
  }
})

如果你不想自己写弹窗样式，也可以替换为任意前端UI库的Toast/Modal组件，逻辑完全一致。

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