关于javascript:UniApp-H5-浏览器下载图片-兼容iOSAndroid

12次阅读

共计 776 个字符，预计需要花费 2 分钟才能阅读完成。

因为官网的 api 下载事件 uni.downloadFile 下载的是临时文件，须要配合 uni.saveFile 应用，然而 uni.saveFile 不反对 H5，另外 uni.saveImageToPhotosAlbum 保留图片到零碎相册也不反对 H5，所以采纳以下形式解决。
装置依赖 FileSaver

npm i file-saver -S

页面代码

import FileSaver from 'file-saver'
···
download(){
  let imgUrl = 'http://www.test.com/img/xxxx.jpg' // 网络图片地址
  FileSaver.saveAs(imgUrl, '图片名称.jpg');
}

如果图片不同源产生跨域，须要配置代理 proxy。
我的项目根目录新建 vue.config.js 代码如下：

module.exports = {
  devServer:{
    proxy:{
      '/file_url': {    // 将 www.exaple.com 印射为 /apis
        target: 'http://www.test.com',  // 接口域名
        secure: false,  // 如果是 https 接口，须要配置这个参数
        changeOrigin: true,  // 是否跨域
        pathRewrite: {'^/file_url': ''   // 须要 rewrite 的,}              
      }
    }
  }
}

配置代理后，'/file_url' = 'http://www.test.com'，须要替换图片地址前缀，页面代码：

import FileSaver from 'file-saver'
···
download(){
  let imgUrl = 'http://www.test.com/img/xxxx.jpg' // 网络图片地址
  FileSaver.saveAs('/file_url'+'/img/xxxx.jpg', '图片名称.jpg');
}

成果如下：

正文完