如何使用Expo FileSystem.uploadAsync展示上传进度？附Axios替代方案

一、Expo FileSystem.uploadAsync的进度支持现状 #

FileSystem.uploadAsync目前没有内置的上传进度监听功能，官方API未提供相关回调参数，没法直接通过这个方法实现进度展示。

二、Axios实现二进制上传+进度展示 #

如果需要进度功能，可以通过Expo FileSystem读取文件二进制数据后，用Axios完成上传并监听进度，具体代码如下：

1. 读取本地文件为二进制Blob #

import * as FileSystem from 'expo-file-system';
import axios from 'axios';

// 从本地URI读取文件为Base64编码，再转换为Blob
const base64Data = await FileSystem.readAsStringAsync(uri, {
  encoding: FileSystem.EncodingType.Base64,
});
const blob = new Blob(
  [Uint8Array.from(atob(base64Data), char => char.charCodeAt(0))],
  { type: 'application/octet-stream' } // 根据文件类型调整MIME，比如图片用image/jpeg
);

2. Axios上传并监听进度 #

try {
  const response = await axios({
    url: uploadUrl,
    method: 'PUT',
    data: blob,
    headers: {
      ...headers,
      'Content-Type': 'application/octet-stream', // 匹配Blob的MIME类型
    },
    onUploadProgress: (progressEvent) => {
      // 计算上传进度百分比
      const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
      // 这里直接更新你的UI组件，比如进度条的数值
      console.log(`上传进度：${progress}%`);
    },
  });
  console.log('上传完成', response.data);
} catch (err) {
  console.error('上传失败', err);
}

注意事项 #

• 如果明确文件类型，把application/octet-stream替换为对应MIME类型，能提升服务端处理的兼容性。
• onUploadProgress回调会在上传过程中多次触发，实时返回已上传字节和总字节数，用来计算进度非常方便。

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