angular - 如何在 Angular 中设置图片上传大小限制(例如最大 2mb)
问题描述
我们正在尝试设置图像大小的限制,例如最大应该为 2mb。我们正在使用 ng2-file-upload。您可以在下面看到代码:
uploader: FileUploader = new FileUploader({
url: URL,
disableMultipart: true
});
...
...
OnFileSelected(event) {
const file: File = event[0];
this.ReadAsBase64(file)
.then(result => {
this.selectedFile = result;
})
.catch(err => console.log(err));
}
Upload() {
if (this.selectedFile) {
this.usersService.AddImage(this.selectedFile).subscribe(
data => {
this.socket.emit('refresh', {});
console.log(data);
},
err => console.log(err)
);
}
}
ReadAsBase64(file): Promise<any> {
const reader = new FileReader();
const fileValue = new Promise((resolve, reject) => {
reader.addEventListener('load', () => {
resolve(reader.result);
});
reader.addEventListener('error', event => {
reject(event);
});
reader.readAsDataURL(file);
});
return fileValue;
}
我们可以在哪里以及如何设置图像的限制?
解决方案
根据W3 文档:
在获取时,如果使用 readAsDataURL() 读取方法,则结果属性必须返回一个 DOMString,它是文件或 Blob 数据的数据 URL [RFC2397] 编码。
所以你reader.result
要么是空的,要么是 DOMString。DOMString 是具有 16 位字符的字符串。
因此,要进行尺寸检查,您应该:
检查是否
reader.result
为null,如果是,则抛出错误或拒绝Promise检查字符串的长度,知道每个字符都是 2 个字节
如果length*2大于2^20就会报错,其实2*2^20就是2MB有多少字节
现在让我们把它翻译成代码:
ReadAsBase64(file): Promise<any> {
const reader = new FileReader();
const fileValue = new Promise((resolve, reject) => {
reader.addEventListener('load', () => {
const result = reader.result as DOMString;
if (!result) reject('Cannot read variable');
if (result.length * 2 > 2**21) reject('File exceeds the maximum size'); // Note: 2*2**20 = 2**21
resolve(reader.result);
});
reader.addEventListener('error', event => {
reject(event);
});
reader.readAsDataURL(file);
});
return fileValue;
}
推荐阅读
- javascript - how i can map and set index 0 to true and the others to false onclick react JS
- c# - Binding dynamic list to comboBox
- javascript - bootstrap modals put values in database
- python - 在不使用 for 循环的情况下从 Python 中的元组中删除特定字符?
- odata - SAPUI5 OData 成功和错误消息与 sap.m.MessageBox
- excel - 创建后更改形状“线”开始/结束
- php - 如何在excel中使用php导出到xml按钮
- angular - 根据动态数据设置 ngStyle
- c# - 使用 linq 聚合表到实体
- asp.net - Asp.Net Core 2 中 AuthenticationResponseGrant 的替代方案