快应用之保存图片

快应用中的保存图片，有坑，踩着就中了，这里也要区分华为和其他厂商，虽然用调试器，在华为和官方提供的都不会出现问题，但是，在应用上线后就出现华为手机无法保存

1.不同点

• 华为手机在下载图片时要显示的定义filename字段
• 先将图片下载为临时文件，然后在图片下载完成后，进行保存到本地
• 使用request.download进行下载，在这个api中加入filename字段，我这里将当前时间的时间戳作为下载的文件名，然后分割图片的网络路径，获取到图片的后缀名

let photoPath = 'http://xxxxxxx.png';
let list = photoPath.split('.');
/* 用时间来作为图片的名字 */
let timeValue = new Date().valueOf();
/* 获取图片后缀 */
let photoExt = list[list.length - 1];
/* 设置要保存的图片名 */
let filename = `${timeValue}.${photoExt}`;

/* 然后加入filename字段，进行下载操作后对下载任务进行监听 */

• 之后用request.onDownloadComplete来监听下载任务，若返回1000则下载任务失败
• 下载成功后使用media.saveToPhotosAlbum来保存图片

完整的代码文件

let photoPath = 'http://xxxxxxx.png';
let list = photoPath.split('.');
/* 用时间来作为图片的名字 */
let timeValue = new Date().valueOf();
/* 获取图片后缀 */
let photoExt = list[list.length - 1];
/* 设置要保存的图片名 */
let filename = `${timeValue}.${photoExt}`;
request.download({
  url: photoPath,
  filename: filename,
  success: data => {
    /* 监听下载任务：1000下载失败，1001下载任务不存在 */
    request.onDownloadComplete({
      token: data.token,
      success: data => {
        /* 保存图片 */
        media.saveToPhotosAlbum({
          uri: data.uri,
          success: () => {
            prompt.showToast({
              message: '图片保存成功！'
            })
          },
          fail: (data, code) => {
            if(code == 201) {
              prompt.showToast({
                message: '授权成功后才能保存图片哦'
              })
            } else if(code == 202) {
              prompt.showToast({
                message: '请刷新后重试'
              })
            } else if(code == 300) {
              prompt.showToast({
                message: 'I/O错误，图片保存失败'
              })
            }
          }
        })
      },
      fail: (data, code) => {
        if(code == 1000) {
          prompt.showToast({
            message: '图片下载失败'
          })
        } else if(code == 1001) {
          prompt.showToast({
            message: '下载任务不存在'
          })
        }
      }
    })
  },
  fail: () => {

  }
})

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

• 往期推荐：

  • 实现单行及多行文字超出后加省略号
  • 判断iOS和Android及PC端
  • 使用vue开发移动端管理后台
  • 画三角形
  • 微信小程序使用车牌号输入法