HTML5教程

UniApp H5 浏览器下载图片 兼容iOS、Android

本文主要是介绍UniApp H5 浏览器下载图片 兼容iOS、Android,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

由于官方的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');
}

效果如下:
image
image
image
image

这篇关于UniApp H5 浏览器下载图片 兼容iOS、Android的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!