uni-app app端 uni.chooseImage API 调用后未返回file对象

uni-app app端 uni.chooseImage API 调用后未返回file对象

开发环境 版本号 项目创建方式
Windows HBuilderX
3.97

测试过的手机

  • redmiK30
  • iphone 12

示例代码

uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'],
sourceType: ['album'],
success: async function (e: any) {
let tempArr = []
console.log(e,"ee");
try{
await handleUpload(e.tempFiles[0])
}catch(e){
console.log(e,"error")
}
console.log(e.tempFiles[0]);
console.log(upload.value.url,"结果")
// if (responce.code) { showTips("")
// } else {
//  contUrl.value = responce
//  tempArr.push(responce)
//  let imgIds: any = await uploadDeal(tempArr)
//  formData.value.bill.billImgId = imgIds.data.join()
// }
},
fail: () => {
showTips("退出相册")
}
});

// 控制台

{
"tempFilePaths":
["file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/doc/uniapp_temp/compressed/1704852711221_wx_camera_1704605049210.jpg"],
"tempFiles":[{"path":"file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/doc/uniapp_temp/compressed/1704852711221_wx_camera_1704605049210.jpg","size":141623}],"errMsg":"chooseImage:ok"}

操作步骤

  • 执行uni.chooseimage API,看返回的文件即可

预期结果

  • 返回file对象

实际结果

  • “tempFiles”:[{“path”:“file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/doc/uniapp_temp/compressed/1704852711221_wx_camera_1704605049210.jpg”,“size”:141623}],

bug描述

  • uni.chooseImage 选择图片API,app端返回的不是File对象,是普通object对象。导致无法上传图片到阿里云oss

更多关于uni-app app端 uni.chooseImage API 调用后未返回file对象的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

更多关于uni-app app端 uni.chooseImage API 调用后未返回file对象的实战教程也可以访问 https://www.itying.com/category-93-b0.html


感谢兄弟!新年快乐

在 uni-app 中,uni.chooseImage API 用于从相册或相机中选择图片。调用该 API 后,返回的结果是一个包含图片文件路径的数组,而不是直接返回 File 对象。如果你需要获取 File 对象,可以通过以下步骤进行处理。

1. 使用 uni.chooseImage 获取图片路径

首先,调用 uni.chooseImage 选择图片,并获取图片的临时路径:

uni.chooseImage({
  count: 1, // 最多可选择图片的数量
  success: (res) => {
    const tempFilePaths = res.tempFilePaths; // 图片的临时路径数组
    console.log('图片临时路径:', tempFilePaths);

    // 如果需要将路径转换为 File 对象
    const filePath = tempFilePaths[0];
    this.convertImageToFile(filePath);
  },
  fail: (err) => {
    console.error('选择图片失败:', err);
  }
});

2. 将图片路径转换为 File 对象

在 uni-app 中,你可以使用 uni.getFileSystemManager().readFileSync 读取文件内容,并将其转换为 File 对象。

methods: {
  convertImageToFile(filePath) {
    const fileManager = uni.getFileSystemManager();
    try {
      const fileContent = fileManager.readFileSync(filePath, 'binary');
      const fileName = filePath.substring(filePath.lastIndexOf('/') + 1);
      const file = new File([fileContent], fileName, { type: 'image/jpeg' }); // 根据实际情况调整 MIME 类型
      console.log('File 对象:', file);
      // 你可以在这里处理 File 对象,例如上传到服务器
    } catch (err) {
      console.error('读取文件失败:', err);
    }
  }
}

3. 注意事项

  • uni.chooseImage 返回的 tempFilePaths 是图片的临时路径,这些路径在应用关闭后可能会失效。
  • File 对象是浏览器环境中的对象,在 uni-app 的 H5 端可以直接使用,但在 App 端和微信小程序端,File 对象的支持可能会有所不同。
  • 在 App 端,如果需要上传文件,通常可以直接使用 tempFilePaths 中的路径,而不需要将其转换为 File 对象。

4. 上传图片

如果你需要上传图片,可以直接使用 uni.uploadFile API,它支持直接使用 tempFilePaths 中的路径进行上传:

uni.uploadFile({
  url: 'https://example.com/upload', // 上传接口地址
  filePath: tempFilePaths[0], // 文件路径
  name: 'file', // 文件对应的 key
  success: (uploadRes) => {
    console.log('上传成功:', uploadRes.data);
  },
  fail: (err) => {
    console.error('上传失败:', err);
  }
});
回到顶部