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

genedna 发布于2019-08-22 11:17 / 742人阅读

摘要：最近用做项目，上传图片时在里面拿到文件，将文件转化为地址显示的时候，发现里面报错，同时提示，最后在谷歌找到解决办法。下面附上我的代码截图。在组件里面引入内置的模块我喜欢在构造器里面定义属性将地址转化为安全地址最后就可以把地址放入的上面了。

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

html中使用input标签

在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上面了。

服务器托管海外云主机将语音转化为文字的软件 js将数据转化为json js将数据转化为json格式图片转化为文字

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92125.html

php图片处理之本地图片转base64格式上传

摘要：文章首发于蓝锅锅博客主要是用到的接口，既然是的，所支持的浏览器我就不多说啦，老生常谈的问题了，远离，珍惜生命。目录路径为目录路径为文章首发于蓝锅锅博客，欢迎交流，共同进步。我们在开发系统时，处理图片上传是不可避免的，例如使用thinkphp的肯定很熟悉import(@.ORG.UploadFile);的上传方式，今天我们来讲一个使用html5 base64上传图片的方法。文章首发于蓝...

levy9527 2019-06-27 14:44 评论0 收藏0
php图片处理之本地图片转base64格式上传

摘要：文章首发于蓝锅锅博客主要是用到的接口，既然是的，所支持的浏览器我就不多说啦，老生常谈的问题了，远离，珍惜生命。目录路径为目录路径为文章首发于蓝锅锅博客，欢迎交流，共同进步。我们在开发系统时，处理图片上传是不可避免的，例如使用thinkphp的肯定很熟悉import(@.ORG.UploadFile);的上传方式，今天我们来讲一个使用html5 base64上传图片的方法。文章首发于蓝...

isaced 2019-08-20 11:56 评论0 收藏0
实践是检验程序员的唯一标准01：用户不想跟你说话并向你扔出一张图片 - 图片上传组件开发【思路篇】

摘要：表示不一定是原生形式的数据。接口基于，继承了的功能并将其扩展使其支持用户系统上的文件。读取操作完成的时候，会变成已完成，并触发事件，同时属性将包含一个格式的字符串编码以表示所读取文件的内容。温馨提示：这里除了一些幼稚的小组件啥也没有温馨提示-续：这是一个新的系列，写一些实际开发中遇到的一些常用的功能，想法笨拙，代码乱套写在前面图片上传，作为web端一个常用的功能，在不同的项目中有...

PiscesYE 2019-08-26 11:31 评论0 收藏0