uni-app uni-file-picker组件上传图片无效果 控制台打印选择失败 {errMsg: "getImageInfo:fail"}

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app uni-file-picker组件上传图片无效果 控制台打印选择失败 {errMsg: “getImageInfo:fail”}

示例代码：

<uni-file-picker  
    ref="addressFile"  
    limit="10"  
    :value="businessAddress"  
    :auto-upload="false"/>

操作步骤：

使用组件

<uni-file-picker  
    ref="addressFile"  
    limit="10"  
    value="businessAddress"
    auto-upload="false"/>

上传图片没效果
控制台打印：选择失败 {errMsg: “getImageInfo:fail”}

预期结果：

能选择成功上传成功

实际结果：

有些图片出现选择失败

bug描述：

uni-file-picker组件上传文件，有些图片上传没反应，不能上传的图片编辑一下或者另存为又能上传了，不能上传的图片移动到另一个目录也还是不能上传，如果将这张不能上传的图片发给自己再保存就又能上传了，都是jpg格式的图片，就是会有一部分图片上传没反应，上传没反应的图片，控制台显示选择失败 {errMsg: “getImageInfo:fail”}

Image 1 Image 2 Image 3 Image 4 Image 5


Harmonyos Next教程
5 回复

你好，你那里那些上传失败的图片，能发一下我测试一下吗？
另外你是用的模拟器还是真机》


是真机上传图片，后面我自己将这个选择失败的图片传给电脑，发现这个上传失败的图片可能是损坏的，电脑也预览不了这张图片，但是手机预览没问题，如果重新将这张图片编辑或者另存为又可以上传了

回复 2***@qq.com: 老哥 后续有反馈吗 我也遇到了这个问题

回复 1***@163.com: 我也蹲一下后续

针对你提到的uni-app中uni-file-picker组件上传图片无效果，并且控制台打印出{errMsg: "getImageInfo:fail"}的错误，这通常意味着在尝试获取图片信息时遇到了问题。以下是一些可能的解决方案，并通过代码示例来展示如何正确配置和使用uni-file-picker组件。

首先，确保你的uni-app和uni-ui库都是最新版本，因为旧版本可能包含未修复的bug。

1. 检查uni-file-picker组件的引入和配置

确保你已经正确引入了uni-ui库，并且在页面中正确使用了uni-file-picker组件。

<template>
  <view>
    <uni-file-picker
      @change="handleFileChange"
      :count="9"
      :mode="['image']"
      :auto-upload="false"
      :limit="9"
    />
  </view>
</template>

<script>
import { ref } from 'vue';
import UniFilePicker from '@dcloudio/uni-ui/lib/uni-file-picker/uni-file-picker.vue';

export default {
  components: {
    UniFilePicker
  },
  setup() {
    const handleFileChange = (e) => {
      const files = e.detail.files;
      files.forEach(file => {
        uni.getImageInfo({
          src: file.path,
          success: (res) => {
            console.log('Image Info:', res);
            // 处理图片信息，如上传等
          },
          fail: (err) => {
            console.error('Failed to get image info:', err);
          }
        });
      });
    };

    return {
      handleFileChange
    };
  }
};
</script>

2. 检查文件路径和权限

确保选择的图片路径是有效的，并且应用有权限访问该路径。在某些平台上（如iOS），你可能需要在manifest.json中声明必要的权限。

3. 调试和错误处理

由于你遇到了getImageInfo:fail的错误，可以添加更多的错误处理逻辑来捕获和诊断问题。例如，检查文件是否已被删除或路径是否正确。

4. 使用其他API或方法

如果问题依旧存在，考虑使用uni.chooseImage代替uni-file-picker组件，看是否能成功获取图片信息。

uni.chooseImage({
  count: 9,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success: (res) => {
    res.tempFilePaths.forEach(path => {
      uni.getImageInfo({
        src: path,
        success: (imageInfo) => {
          console.log('Image Info:', imageInfo);
        },
        fail: (err) => {
          console.error('Failed to get image info:', err);
        }
      });
    });
  }
});

以上代码示例展示了如何配置和使用uni-file-picker组件，并提供了基本的错误处理逻辑。如果问题仍未解决，建议检查具体的平台限制或查看官方文档和社区支持。

回到顶部