图片上传显示不了Mixed Content: The page at ‘https://XXX’ was loaded over HTTPS was loaded over HTTPS, but...

附件上传图片无法展示

Mixed Content: The page at ‘https://XXX’ was loaded over HTTPS was loaded over HTTPS, but requested an insecure image 'cdvfile://localhost/cache/***.jpg'. This request has been blocked; the content must be served over HTTPS.

本项目前端是用vue,后端 是tomcat+nginx实现的，在使用tomcat+nginx时。Nginx使用https，tomcat使用http。使用iframe之类框架，在重定向时会出现以上问题导致页面加载不出来。这是因为Tomcat不能知道Nginx发来的是http还是https。

如图所示图片上传后无法显示，有试过后端服务器修改

该配置项目在CSDN上找到的

链接为： https://blog.csdn.net/qq_27114677/article/details/77848078  （但是我这边按照这个修改并没有效果。）

于是继续寻找解决方案，查找了各种资料，最终找到2种方案。

1、将图片上传到https的文件服务器上，然后再将返回的https图片路径拿来做展示，可以解决图片显示不了的问题。缺点是效率有点低，一次每次修改图片都得上传到服务器然后再去删除，如果操作失误过多，会导致服务器垃圾文件越来越多。

2、第二种方案就是将图片从相机或者相册取出来后转换成base64格式重新定义一个数组保存起来用来做展示（亲测有效），另外的一个上传用的文件流依旧用于上传。这样方便在本地做删除，变换图片等操作 。而不会影响到服务器，最终确定后再进行批量上传。具体实现代码：