因为官网的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');}

成果如下: