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

• Z时代
• 2024-01-10
• 分类：技术分享

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

效果如下：

以上是 UniApp H5 浏览器下载图片 兼容iOS、Android 的全部内容， 来源链接： utcz.com/a/41885.html