react-native-document-picker返回undefined问题求助

核心原因 #

react-native-document-picker 最新版本的 pick()（单文件选择）和 pickMultiple()（多文件选择）接口，返回值都是数组类型——哪怕只选了一个文件，也会返回长度为1的数组。你直接访问 res.uri 本质是在访问数组对象的 uri 属性，自然返回 undefined；但 JSON.stringify(res) 会把整个数组（包含内部的文件对象）完整打印出来，所以能看到正确的文件信息。

正确处理方式 #

1. 单文件选择场景 #

如果用的是 pick() 接口，直接取数组的第一个元素即可：

import DocumentPicker from 'react-native-document-picker';

// 选择图片的函数
const pickImage = async () => {
  try {
    const res = await DocumentPicker.pick({
      type: [DocumentPicker.types.images],
    });
    // 取数组第一个元素，这才是真正的文件对象
    const selectedImage = res[0];
    console.log(selectedImage.uri); // 正常获取uri
    console.log(selectedImage.type); // 正常获取type
    this.setState({ photo: selectedImage }); // 正确设置状态
  } catch (err) {
    if (DocumentPicker.isCancel(err)) {
      // 用户取消选择的逻辑
    } else {
      throw err;
    }
  }
};

2. 多文件选择场景 #

如果用的是 pickMultiple()，需要遍历数组处理每个文件：

const pickMultipleImages = async () => {
  try {
    const resArray = await DocumentPicker.pickMultiple({
      type: [DocumentPicker.types.images],
    });
    // 遍历数组处理每个文件
    resArray.forEach(file => {
      console.log(file.uri, file.type);
    });
    this.setState({ photos: resArray }); // 保存多文件数组到状态
  } catch (err) {
    if (DocumentPicker.isCancel(err)) {
      // 用户取消选择的逻辑
    } else {
      throw err;
    }
  }
};

3. 验证步骤（可选） #

可以在回调里先确认返回值的类型，排查是否为数组：

const res = await DocumentPicker.pick(...);
console.log(Array.isArray(res)); // 应返回true

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