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');
}

效果如下：

提到uni-app，很多人褒贬不一。其实UNI-APP提供了很多很多可以直接使用的插件市场，在插件市场里面我们可以找到UI框架、商城模板、蚂蚁森林小游戏模板、即时通讯等插件，也就是说，我们不需要写太多的代码，就能够拥有漂亮的用户UI、商城页面等，并且这些都是中文文档，对于大部分不喜欢英文的程序员来说，这绝对是最大的福利。

同时，UNI-APP还能够打包出微信小程序、头条小程序、支付宝小程序、百度小程序、360小程序和快应用等等，这绝对是提高效率的最佳选手了。

对于uni-app最早商业化之一的软件公司来客推（多商户系统），目前推出的多商户源码，就是基于uni-app开发的，最新最全商业源码

本文转载：https://www.src1024.com/tech/talk/28195.html