这是一个so easy的问题,主要是记录一下angular 的模板变量的使用和组件中匿名方法 ,箭头方法使用的区别
<div nz-col [nzSpan]="3">
<!-- 设置为 display: none ,因为 input看上去太丑 -->
<input type="file" style="display: none" (change)="fileInputChange(fileInput)" multiple #fileInput />
<!-- 因为 input 设置为不可见,所以需要给用户一个可以触发 input 的按键 -->
<a (click)="choseIcon(fileInput)">
<!-- img 的 src 属性绑定 组件的 icon属性的值,这个icon 属性就是转换后的base64串 -->
<img alt="图标" [src]="icon" class="menu-icon">
</a>
</div>
export class MenuEditComponent implements OnInit {
icon = '';
// 点击按键时触发 input的click方法
choseIcon(fileInput: any) {
fileInput.click();
}
// 当选择文件后会进入这个方法
fileInputChange(fileInput) {
const file = fileInput.files[0];
const fileReader = new FileReader();
fileReader.onload = ev => {
const data = fileReader.result.toString();
this.icon = data;
};
fileReader.readAsDataURL(file);
}
}
<input type="file" (change)="fileInputChange(fileInput)" multiple #fileInput />
这行代码最后的 #fileInput 代表在这个组件中定义一个变量 fileInput ,这个变量就代表了 这个input对象 ,在使用时和使用模板变量没有差别,但是要注意定义这个模板变量的作用域,不是在你的组件中定义的,你这个组件就可以到处都能使用的,如是你使用了一个第三方的组件,这个组件允许你在组件标签内写一些模板代码,如是你在这个第三方组件的内部定义的这个引用变量,这个第三方组件的外部就不能用这个引用变量
除了可以将标签元素赋值给模板引用变量外,还可以将一个组件引用赋值给模板引用变量(如是这个组件/指令导出了),[官方例子]['https://angular.cn/guide/forms#show-and-hide-validation-error-messages']
<label for="name">Name</label>
<input type="text" class="form-control" id="name"
required
[(ngModel)]="model.name" name="name"
#name="ngModel">
<div [hidden]="name.valid || name.pristine"
class="alert alert-danger">
Name is required
</div>
这一行代码[(ngModel)]="model.name" name="name" #name="ngModel" 前面是双向绑定没什么可说的,后面#name="ngModel 意思是将当前这个指令的的对象赋值给 name 变量,然后在这一行 <div [hidden]="name.valid || name.pristine">使用时, 可以通过 name变量访问更多的参数,比如 这个input 是否被点过(touch),是否被赋值过(dirty)等等;
区别主要在于 上下文的this指向的目标不一样
箭头函数中的this 指向的是这个组件实例,匿名方法 指向的是这个方法 的调用方
fileInputChange(fileInput) {
const file = fileInput.files[0];
const fileReader = new FileReader();
fileReader.onload = ev => {
const data = fileReader.result.toString();
this.icon = data;
};
fileReader.readAsDataURL(file);
}
这个方法 中 fileReader 的 onload方法 如果这样写
fileReader.onload = function(ev) {
const data = fileReader.result.toString();
this.icon = data;
};
那么 this 指的就是fileReader,因为是这个对象调用了 它自己的onload,也就是这个匿名方法;这时页面上不会体现出你选择了新的图片,因为你没有 为组件的 icon属性赋值,而是给fileReader的icon属性赋值了
如是使用箭头函数,那么this指的就是组件本身
这篇文章主要讲解通过原生js,将图片地址转换为base64格式后显示的方法,以及base64的图片数据如何转换为file文件并提交。
JavaScript对字符串/base64的编码和解码;Base64其实是一种简单的置换加密方式,但是BASE64的用处往往并不是为了防止信息泄露,而且为了方便传输,进过BASE64编码后的信息会比原始信息长,大概是4/3倍。
javascript原生的api是支持,Base64的, window.btoa方法将普通字符串转为Base64字符串,window.atob将Base64字符串转为普通字符串,它们在现代浏览器中受到广泛的支持。
在项目开发过程中,经常会有图片导出的需求,原生js实现base64图片下载实现思路:需要创建a标签,然后把base64的图片转为为blob对象,再通过URL.createObjectURL方法复制给a标签的href属性,最后添加添加事件的方法。
base64是当前网络上最为常见的传输8Bit字节代码的编码方式其中之一。base64主要不是加密,它主要的用途是把某些二进制数转成普通字符用于网络传输。由于这些二进制字符在传输协议中属于控制字符,不能直接传送,所以需要转换一下
JavaScript 原生提供两个 Base64 相关的方法:btoa():任意值转为 Base64 编码,atob():Base64 编码转为原来的值。注意:这两个方法不适合非 ASCII 码的字符,会报错。
base64是用规定的64种字符来表示任意二进制数据的一种编码格式,base64编码不提供加密,只是将一种形式的数据转化为另一种形式。Base64编码使用二进制表示,字符串的每一个字符由8个字节表示
Base64 是基于 64 个可打印字符 A-Z、a-z、0-9、+、/ 来表示二进制数据的表示方法,常用于数据在网络中的传输。本篇将分别介绍其编码、解码以及实际运用。
为什么图片转成Base64编码,就可以直接内联到HTML中显示呢?为什么Base64编码后,体积会增大1/3呢?如果你对此也有疑问的话,就往下一看究竟吧。
因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于地址不对或者没有将图片
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!