Angular4实现图片上传预览路径不安全的问题解决

2024-04-14 06:32:13

前言

前一段时间做项目时，遇到一个问题就是AngularJS实现图片预览和上传的功能，在Angular4中，通过input:file上传选择图片本地预览的时候，通过window.URL.createObjectURL获取的url赋值给image的src出现错误：

WARNING: sanitizing unsafe URL value

下面介绍一下解决方法：

html代码：

<input type="file" (change)="fileChange($event)" >
<img [src]="imgUrl" alt="">

其中，change方法会在每次选择图片后调用，image的src必须通过属性绑定的形式，使用插值表达式同样会出错

ts代码

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'
@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
 imgUrl;
 constructor(
 private sanitizer: DomSanitizer
 ){}
 ngOnInit() { }
 fileChange(event){
 let file = event.target.files[0];
 let imgUrl = window.URL.createObjectURL(file);
 let sanitizerUrl = this.sanitizer.bypassSecurityTrustUrl(imgUrl);
 this.imgUrl = sanitizerUrl;
 }
}

首先，引入DomSanitizer，然后在构造器里面注入，最重要的就是把window.URL.createObjectURL生成的imgUrl通过santizer的bypassSecurityTrustUrl方法，将它转换成安全路径。

最后将生成的安全的url赋值给imgUrl，此时就没有问题了~

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

Angularjs上传图片实例详解

•上传图片需要引入插件ngFileUpload,使用bower安装方法: bower install ng-file-upload --save,安装后需要在命名app的名字js文件中注入,如下所示: (function() { angular.module('app', [ 'ionic','ngStorage','ngFileUpload' ]); })(); •在相应的html中引入文件路径:<script src="lib/ng-file-upload/ng-file-upload
AngularJS实现图片上传和预览功能的方法分析

本文实例讲述了AngularJS实现图片上传和预览功能的方法.分享给大家供大家参考,具体如下: html5原生方法先看一下html5原生方法上传和预览图片的实现: // <img id="img-preview"> var imgPreview = document.getElementById("img-preview"); // <input id="img-input" type="file">
angularjs实现多张图片上传并预览功能

本文实例为大家分享了angularjs上传多张图片并预览的具体代码,供大家参考,具体内容如下 directive.js /* * 多图片上传及预览指令(需指定图片类名) * */ angular.module('routerModule').directive('fileModel', ['$parse', 'fileReader', function($parse, fileReader) { return { restrict:'A', link:function(scope, elemen
angularjs点击图片放大实现上传图片预览

本文实例为大家分享了angularjs点击图片放大预览的具体代码,供大家参考,具体内容如下承接上一篇文章 /*图片点击放大再点击还原*/ angular.module('routerModule').directive('enlargePic',function(){//<span style="font-family: Arial, Helvetica, sans-serif;">enlargePic指令名称,写在需要用到的地方img中即可实现放大图片</span
Angularjs实现上传图片预览功能

废话不多说了,直接给大家贴代码了,具体代码如下所示: <input type="file" ng-file-select="onFileSelect($files)" accept="image/*"> app.factory("fileReader", function($q, $log) { var onLoad = function(reader, deferred, scope) { return func
angularjs客户端实现压缩图片文件并上传实例

主要是利用html5的canvas来进行图片的压缩,然后转化为dataURL,再有dataURL转化为Blob文件,Blob对象可以直接赋值给Formdata. app.service('Util', function($q) { var dataURItoBlob = function(dataURI) { // convert base64/URLEncoded data component to raw binary data held in a string var byteString
AngularJs上传前预览图片的实例代码

在工作中,使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,之前查了一些资料,结合实践,得出一种比较实用的方法,相对简化版,在这里记录一下,如有不同看法,欢迎一起沟通,一起成长. demo.html: <!doctype html> <html ng-app="myTestCtrl"> <head> <meta charset="UTF-8"> <title>demo&l
Angular下H5上传图片的方法（可多张上传）

最近做的项目中用到了angular下上传图片功能,在做的过程中遇到了许多问题,最终都得以解决 angular上传时和普通上传时过程差不多,只不过是要不一些东西转化为angular的东西. 1.ng-file-select,指令angular是没此功能的,其实也是转化成了change事件,不多说,直接上代码 angular.module('myApp') .directive('ngFileSelect', [ '$parse', '$timeout', function($parse, $tim
angular2+nodejs实现图片上传功能

在使用angular2进行图片上传的时候,遇到了各种各样的问题.在多番尝试之后最终成功上传图片,下面将我的方法分享给大家: nodejs 后台代码 var express = require("express"); //网络请求模块 var request = require("request"); //引入nodejs文件系统模块 const fs = require('fs'); //引入body-parser //包含在请求正文中提交的键/值对数据. //默认
通过AngularJS实现图片上传及缩略图展示示例

通过AngularJS实现图片上传及缩略图展示示例,废话不多说了,具体如下: 从项目中截出的代码 HTML部分: <section> <img src="image/user-tuijian/tuijian_banner.png" /> <div> <form ng-submit="submit_form()"> <input type="text" name="aaa"

Angular4实现图片上传预览路径不安全的问题解决

相关推荐

随机推荐