如何使用Nuxt3内置$fetch(ohmyfetch)实现文件上传进度指示器？

原生fetch API本身不支持上传进度监听，而Nuxt3内置的$fetch基于ohmyfetch封装，默认也没有提供上传进度的回调。要实现这个功能，你可以通过**XMLHttpRequest（XHR）**来手动实现，因为XHR原生支持上传进度跟踪。

实现代码示例 #

const progress = ref(0);

async function uploadFile(formData) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    
    // 监听上传进度
    xhr.upload.addEventListener('progress', (event) => {
      if (event.lengthComputable) {
        progress.value = Math.round((event.loaded / event.total) * 100);
      }
    });

    // 请求完成处理
    xhr.addEventListener('load', () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(new Error(`Request failed with status ${xhr.status}`));
      }
    });

    // 请求错误处理
    xhr.addEventListener('error', () => {
      reject(new Error('Network error occurred'));
    });

    // 配置请求
    xhr.open('POST', '/portfolio/upload/');
    // 如果需要携带Nuxt的CSRF token，可以添加请求头
    // xhr.setRequestHeader('X-CSRF-Token', useCookie('XSRF-TOKEN').value);
    xhr.send(formData);
  });
}

// 使用示例
// const formdata = new FormData();
// formdata.append('file', file);
// await uploadFile(formdata);

补充说明 #

• 如果你想继续贴近$fetch的语法风格，可以把上述XHR逻辑封装成自定义函数，但直接使用XHR是最直接高效的方案。
• 目前原生fetch没有标准的上传进度API，所以暂时只能通过XHR来实现这个需求。

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