uni-app uni.chooseImage手机拍照和选择相册图片返回的tempFiles都不是File格式

uni-app uni.chooseImage手机拍照和选择相册图片返回的tempFiles都不是File格式

开发环境 版本号 项目创建方式
PC Windows 20H2 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：20H2 内部版本号：19042.1620

HBuilderX类型：正式

HBuilderX版本号：3.3.1

手机系统：Android

手机系统版本号：Android 11

手机厂商：华为

手机机型：华为mate40 Pro

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：

uni.chooseImage({
sourceType: [“camera”, “album”],
sizeType: [“compressed”, “original”],
count: 3,
success: (res) => {
if (res.tempFiles && res.tempFiles.length) {
res.tempFiles.forEach(item => {
if (item.path) {

            } else {  
                uni.uploadFile({  
                    url: baseUrl + "/oss/uploadFiles",  
                    file: item,  
                    fileType: "image",  
                    success: uploadFile => {  
                        const result = JSON.parse(uploadFile.data);  
                        this.addForm.pic.push(result.data.src)  
                    },  
                    fail: (err) => {  
                        console.log('上传失败_______________', err)  
                    }  
                })  
            }  
        });  
    }  
},

});


操作步骤：
每次尝试都是这样，在H5上，就是正常的File格式

预期结果：
期望能在手机上也返回File格式的图片，因为我需要用来上传到服务器。

实际结果：
现在返回的格式是普通的对象。

bug描述：
我用uni.chooseImage方法，然后在手机上调试，无论是选择相册里的图片，还是直接拍照，success方法返回的tempFiles格式，都不是File格式。
我的HBuilder X准确的版本号是：3.3.13.20220314

![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20220409/35b1429984b507bd525dcf7b1b57c4ec.png)

更多关于uni-app uni.chooseImage手机拍照和选择相册图片返回的tempFiles都不是File格式的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

本来就是返回路径呀

更多关于uni-app uni.chooseImage手机拍照和选择相册图片返回的tempFiles都不是File格式的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我知道了，抱歉，是我的问题。不过建议文档那里能够描述清楚一点，不是一定返回File。抱歉

您好，我也遇到这样的问题，需要返回file文件，怎么解决的？

在 uni-app 中，使用 uni.chooseImage 方法选择图片或拍照后，返回的 tempFiles 是一个包含临时文件路径的数组，而不是标准的 File 对象。这是因为 uni.chooseImage 返回的是图片的临时路径，而不是直接操作文件对象。

解决方法

如果你需要将 tempFiles 转换为 File 对象，可以通过以下步骤实现：

  1. 获取临时文件路径：从 tempFiles 中获取图片的临时路径。
  2. 使用 uni.getFileSystemManager().readFile 读取文件内容：将临时文件读取为二进制数据。
  3. 创建 File 对象：使用读取到的二进制数据创建 File 对象。

示例代码

uni.chooseImage({
  count: 1, // 选择一张图片
  success: (res) => {
    const tempFilePaths = res.tempFilePaths; // 获取临时文件路径
    const tempFilePath = tempFilePaths[0]; // 获取第一个临时文件路径

    // 读取文件内容
    uni.getFileSystemManager().readFile({
      filePath: tempFilePath,
      encoding: 'binary', // 读取为二进制数据
      success: (fileRes) => {
        const fileData = fileRes.data; // 获取文件二进制数据

        // 创建 File 对象
        const file = new File([fileData], 'image.jpg', { type: 'image/jpeg' });

        // 现在你可以使用 file 对象了
        console.log(file);
      },
      fail: (err) => {
        console.error('读取文件失败', err);
      }
    });
  },
  fail: (err) => {
    console.error('选择图片失败', err);
  }
});

注意事项

  • File 对象是浏览器环境中的标准对象，在 uni-app 的某些环境中（如小程序）可能无法直接使用。如果你在小程序中使用 File 对象，可能需要根据具体环境进行适配。
  • 如果你只是需要上传图片，可以直接使用 tempFilePaths 中的路径，而不需要转换为 File 对象。uni.uploadFile 方法可以直接使用临时文件路径进行上传。

上传图片示例

如果你只是想上传图片，可以直接使用 uni.uploadFile：

uni.chooseImage({
  count: 1,
  success: (res) => {
    const tempFilePaths = res.tempFilePaths;
    uni.uploadFile({
      url: 'https://example.com/upload', // 上传地址
      filePath: tempFilePaths[0],
      name: 'file',
      success: (uploadRes) => {
        console.log('上传成功', uploadRes.data);
      },
      fail: (err) => {
        console.error('上传失败', err);
      }
    });
  },
  fail: (err) => {
    console.error('选择图片失败', err);
  }
});
回到顶部