angular4 上传本地图片，将拿到的files转化为url地址，提示sanitizing unsafe URL value...

最新推荐文章于 2022-11-22 09:05:38 发布

转载最新推荐文章于 2022-11-22 09:05:38 发布 · 967 阅读

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a31ddad6fb9a044fc44bfd1

文章标签：

本文介绍如何在Angular4中解决预览本地上传图片时出现的WARNING:sanitizingunsafeURLvalue警告。通过引入StampComponent模块，并利用DomSanitizer进行地址的安全转化。

最近用angular4做项目，上传图片时在onchange里面拿到files文件，将files文件转化为url地址显示的时候，发现console里面报错，同时angular4提示WARNING: sanitizing unsafe URL value，最后在谷歌找到解决办法。下面附上我的代码截图。

html中使用input标签

<input #file2 type="file" id="logo" value="" name="file" accept="image/*" multiple [disabled]="isInput" />
复制代码

在onchange里面拿到files文件

// 获取图片文件
let files = this.files;
// 转化为url
let imgurl = window.URL.createObjectURL(files[0]);
复制代码

这时按照我以前用angular1的做法直接把这个地址绑定到img标签上就可以预览本地上传的图片，但是，angular4却报了WARNING: sanitizing unsafe URL value，还好找到了解决办法。

1：在组件里面引入angular内置的StampComponent模块

import {StampComponent} from "../base/stamp/stamp.component";
复制代码

2：我喜欢在构造器里面定义属性

constructor(private sanitizer:DomSanitizer) { }
复制代码

3：将地址转化为安全地址

let sanitizerUrl = self.sanitizer.bypassSecurityTrustUrl(imgurl);
复制代码

最后就可以把地址放入img的src上面了。