因为官网的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');}
成果如下: