场景:使用 uni.saveImageToPhotosAlbum 保存图片,其他手机都是可以的,但在鸿蒙系统的手机上出现了bug,报错Object {errMsg:"savelmageToPhotosAlbum:fai..errMsg:savelmageToPhotosAlbum:fail invalid filetype"}

原因:部分手机使用uni.downloadFile方法下载网络资源图片后,得到的图片临时路径的扩展名是unknown,所以后续在调用wx.saveImageToPhotosAlbum 方法时候会报错以上错误——文件类型错误。

解决方法: filePath指定文件下载后存储的路径,手动加扩展名.jpg

代码实现:代码下面贴啦我框出来的重点地方

    saveImg() {
      const url = this.posterImage // 真正要下载的图片地址
      let filename = new Date().getTime() + ".jpg";
      let filePath = wx.env.USER_DATA_PATH + "/" + filename  // wx.env.USER_DATA_PATH:获取到这个目录的路径。
      console.log('图片临时地址', filePath);
      uni.authorize({
        scope: 'scope.writePhotosAlbum',
        success() {
          uni.showLoading({ title: '图片保存中', mask: true })
          uni.downloadFile({
            url: url,
            filePath: filePath,
            fail(err) {
              uni.hideLoading()
              console.error('保存失败,错误信息:', err);
              uni.showToast({
                title: '保存失败,请稍后重试',
                icon: 'none',
              })
            },
            success(res) {
              uni.saveImageToPhotosAlbum({
                filePath: res.filePath,
                success() {
                  uni.hideLoading()
                  // 删除缓存
                  let fileMgr = wx.getFileSystemManager();
                  fileMgr.unlink({
                    filePath: filePath, // 这里是上面自己设置的临时文件路径
                    success() {
                      console.log('删除成功');
                    },
                    fail(err) {
                      console.error('删除失败,错误信息:', err);
                    }
                  })
                },
                fail(err) {
                  uni.hideLoading()
                  console.error('保存失败,错误信息:', err);
                  uni.showToast({
                    title: '保存失败,请稍后重试',
                    icon: 'none',
                  })
                },
              })
              console.log(res)
            },
          })
        },
        fail:(fail)=>{
          uni.hideLoading()
          console.log('授权失败:', fail);
        },
      })
    },

重点:重要部分被我用红框框框住啦~

以上方法解决我在鸿蒙系统上发现的问题,要是实在还有什么刁难的手机不适配,就试试图片上自带的一个属性:show-menu-by-longpress,可以让用户长按保存,或者使用wx.showShareImageMenu方法,帮用户调起长按菜单~

image | uni-app官网

 wx.showShareImageMenu(Object object) | 微信开放文档

参考地址:https://developers.weixin.qq.com/community/develop/article/doc/00028e66964080633ab98abae5b813 

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐