由于官方的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'); }
效果如下: