Question

大家好我在 Angular项目上传图片的情况下，如果用户没有选择图片，那么我想 从资源文件夹中读取图片并将其发送到后端 即可。经过数小时的反复试验。我无法将资产文件夹中的图像读取到JavaScript文件对象。如果有人知道请指导我。提前谢谢。

我尝试过的事情

我试图通过传递相对路径在Angular中使用 HttpClient 来获取它。
我尝试通过将相对路径传递给文件（网址）来创建文件对象;没有运气的构造函数。

请帮帮我。

我的问题是通过访问角度（4/5）项目中资产文件夹中的图像来创建文件对象。

Answer 1

要从javascript访问您的资源，您需要使用DomSanitizer将您的资源标记为受信任：

constructor(sanitizer: DomSanitizer) {
   const sanitizedUrl = sanitizer.bypassSecurityTrustResourceUrl('/assets/<YOUR_IMAGE>');
}

来自Angular Security 为什么：

为了系统地阻止XSS错误，Angular默认将所有值视为不受信任。当一个值从模板，通过属性，属性，样式，类绑定或插值插入到DOM中时，Angular会清理并转义不受信任的值。

How to by pass when trusted.

Answer 2

最后，无论任何JavaScript框架如何，我都得到了它的答案。

var blob = null;
var xhr = new XMLHttpRequest(); 
xhr.open("GET", './assets/<FILENAME>'); 
xhr.responseType = "blob";//force the HTTP response, response-type header to be blob
xhr.onload = function() 
{
    blob = xhr.response;//xhr.response is now a blob object
    var file = new File([blob], 'logo.png', {type: 'image/png', lastModified: Date.now()});
    console.log(file);   
}
xhr.send()
}

更多详情： - http://qnimate.com/javascript-create-file-object-from-url/

如何从assets文件夹访问图像到javascript对象

2 个答案: