如何在使用 Nuxt3 内置的 $fetch（ohmyfetch）上传文件时显示进度指示器？

Question

Nuxt3文档建议使用其内置的$fetch方法进行API调用。我正在尝试显示文件上传器的上传进度。我以前使用Axios做过，但它与$fetch方法不兼容。这是我的代码，它可以与Axios一起使用：

//...
const config = {
  onUploadProgress: (progressEvent) => {
    progress.value = Math.round((progressEvent.loaded / progressEvent.total)*100);
  }
}

$fetch('/portfolio/upload/', {method: 'POST', body: formdata, config});
//...

我查看了关于GitHub上的ohmyfetch文档，但是没有找到有关如何使用$fetch方法处理上传进度的任何信息。你有什么想法吗？

- mo3n

---

我甚至不确定这是否可以使用Axios完成。对我来说，这是一个fetch的事情。也许在存储库上创建一个问题。 - kissu

@kissu 那里已经有一个开放的问题 https://github.com/unjs/ohmyfetch/issues/45 - mo3n

Answer 1

目前，Fetch或ofetch不支持上传进度，只能在浏览器中使用XMLHttpRequest实现。示例如下：

function upload (url, file) {
    const form = new FormData()
    form.append('file', file)

    const xhr = new XMLHttpRequest()
    xhr.open('post', url, true)
    xhr.upload.onprogress = function (ev) {
        // Upload progress here
        console.log(ev)
    }
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            // Uploaded
            console.log('Uploaded')
        }
    }
    xhr.send(form)
}

你可以在这里了解更多信息：如何为fetch上传添加进度指示器？

- Vedmant

---

相信 XMLHttpRequest 不是必需的，至少 fetch 支持它。 - kissu

@kissu 不，它不是。https://fetch.spec.whatwg.org/#fetch-api：`fetch()方法是用于获取资源的相对较低级别的API。它涵盖了比XMLHttpRequest更多的内容，尽管在请求进度方面目前还有所欠缺（而不是响应进度）。` - Vedmant

下载进度和请求进度有什么区别？ - kissu

@kissu 请求进度与上传进度相同，当您上传大文件时。 甚至在您添加的链接中，有这样的文本：“请注意：当前没有办法通过fetch跟踪上传进度。 为此，请使用XMLHttpRequest，稍后我们将介绍它。” - Vedmant

@kissu 这是下载进度与上传进度的区别。 - select