React-native-image-picker 图像文件名为空答案

【问题标题】：React-native-image-picker image fileName is nullReact-native-image-picker 图像文件名为空
【发布时间】：2020-05-31 03:29:09
【问题描述】：

开发人员，我正在使用 react-native-image-picker 将图像上传到 Nodejs 服务器和 MongoDB，当我在 react native 应用程序上选择图像时，它会在控制台日志上显示图像 fileName="null"。我挣扎了 3 周，找不到任何解决方案。下面我发布了console.log结果：

Response =  {"fileName": null, "fileSize": 13712705, "height": 3024, "isVertical": false, "origURL": "assets-library://asset/asset.HEIC?id=CC95F08C-88C3-4012-9D6D-64A413D254B3&ext=HEIC", "type": "image/jpeg", "uri": "file:///Users/shinobi/Library/Developer/CoreSimulator/Devices/9DBEA6D8-101E-4B9C-9DB0-D1CABA724AAF/data/Containers/Data/Application/44C0E455-2A43-40A3-A2EE-213A39B7743C/tmp/35A90028-55FA-4218-8FB7-34EB1DE62F58.jpg", "width": 4032}

下面是我的 react-native-image-picker 代码：

const ChangeTasbir = ({navigation, route}, props) => {

  const [image, setImage] = useState(null);
  const [id, setId] = useState(getDetails('id'));
  const [isuploading, setIsuploading] = useState(false);

  const selectImage = () => {
    const options = {
      noData: true,
    };
    ImagePicker.showImagePicker(options, response => {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        const source = {
          uri: response.uri,
          fileName: response.fileName,
          data: response.data,
        };

        // You can also display the image using data:
        // const source = { uri: 'data:image/jpeg;base64,' + response.data };

        setImage(source);
      }
    });
  };

【问题讨论】：

标签： react-native react-native-image-picker

【解决方案1】：

我在 Android 上的 React 本机应用程序中使用了这个选项并且工作正常。

const options = {
      mediaTypes: 'Images',
      quality: 0.1,
    };

    ImagePicker.launchImageLibrary(options, (response) => {
      if (response.didCancel !== true) {
        this.setState({ profilePic: response, errorPic: false });

      }
    });

【讨论】：

您可以使用console.log () 显示response 对象中的数据
你能展示你的setImage( )函数吗？请编辑问题。你使用异步，但任何时候都不要使用等待
const source = { uri: response.uri, fileName: response.fileName, data: response.data, }; // 你也可以使用 data 显示图像： // const source = { uri: 'data:image/jpeg;base64,' + response.data }; setImage(source);
我已经更新了我的代码，你能帮我现在修复它吗@Remato
你可以试试其他图片吗？请参阅文档说：“返回文件名，如果可用”。链接在这里：github.com/react-native-community/react-native-image-picker/…

【解决方案2】：

试试这个：

let path = response.uri;
if (Platform.OS === "ios") {
   path = "~" + path.substring(path.indexOf("/Documents"));
}
if (!response.fileName) response.fileName = path.split("/").pop();

【讨论】：