如何将字符串变量作为参数发送给onload函数
如何将字符串变量作为参数发送给onload函数
提问于 2018-07-24 07:23:24
我正在尝试将文件转换为Base64，并将字符串存储为独立变量：
sellersPermitString: string;
DriversLicenseString: string;
InteriorPicString: string;
ExteriorPicString: string;这是我正在使用的方法，它只允许我将base64保存到imageSrc中
imageSrc;
handleInputChange(files) {
var file = files;
var pattern = /image-*/;
var reader = new FileReader();
if (!file.type.match(pattern)) {
alert('invalid format');
return;
}
reader.onloadend = this._handleReaderLoaded.bind(this);
reader.readAsDataURL(file);
}
_handleReaderLoaded(e) {
let reader = e.target;
var base64result = reader.result.substr(reader.result.indexOf(',') + 1);
this.imageSrc = base64result;
console.log(this.imageSrc)
}这就是我试图将base64的值保存到我的变量中的方法，但我没有得到第一个文件，只有其他文件。
public picked(event, field) {
let fileList: FileList = event.target.files;
if (fileList.length > 0) {
const file: File = fileList[0];
if (field == 1) {
this.sellersPermitFile = file;
this.handleInputChange(file); //turn into base64
this.sellersPermitString = this.imageSrc;
console.log(this.sellersPermitString)
}
else if (field == 2) {
this.DriversLicenseFile = file;
this.handleInputChange(file); //turn into base64
this.DriversLicenseString = this.imageSrc;
console.log(this.DriversLicenseString)
}
else if (field == 3) {
this.InteriorPicFile = file;
this.handleInputChange(file); //turn into base64
this.InteriorPicString = this.imageSrc;
console.log(this.InteriorPicString)
}
else if (field == 4) {
this.ExteriorPicFile = file;
this.handleInputChange(file); //turn into base64
this.ExteriorPicString = this.imageSrc;
console.log(this.ExteriorPicString)
}
}
else {
alert("No file selected");
}
}有什么想法吗？
换句话说，我希望有一个接收文件的方法和一个存储结果base64的变量。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-24 08:16:48
将图像转换为base64是异步操作，这是文件未定义的原因，因为此行
this.sellersPermitString = this.imageSrc;在第二次将图像转换为base64之前执行
this.DriversLicenseString = this.imageSrc;DriversLicenseString将包含第一个文件的值。
设置该值的安全位置是_handleReaderLoaded
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
imageSrc;
sellersPermitFile: any;
DriversLicenseFile: any;
InteriorPicFile: any;
ExteriorPicFile: any;
//base64s
sellersPermitString: string;
DriversLicenseString: string;
InteriorPicString: string;
ExteriorPicString: string;
//json
finalJson = {};
currentId: number = 0;
addPictures() {
this.finalJson = {
"sellersPermitFile": this.ExteriorPicString,
"DriversLicenseFile": this.DriversLicenseString,
"InteriorPicFile": this.InteriorPicString,
"ExteriorPicFile": this.ExteriorPicString
}
}
public picked(event, field) {
this.currentId = field;
let fileList: FileList = event.target.files;
if (fileList.length > 0) {
const file: File = fileList[0];
if (field == 1) {
this.sellersPermitFile = file;
this.handleInputChange(file); //turn into base64
}
else if (field == 2) {
this.DriversLicenseFile = file;
this.handleInputChange(file); //turn into base64
}
else if (field == 3) {
this.InteriorPicFile = file;
this.handleInputChange(file); //turn into base64
}
else if (field == 4) {
this.ExteriorPicFile = file;
this.handleInputChange(file); //turn into base64
}
}
else {
alert("No file selected");
}
}
handleInputChange(files) {
var file = files;
var pattern = /image-*/;
var reader = new FileReader();
if (!file.type.match(pattern)) {
alert('invalid format');
return;
}
reader.onloadend = this._handleReaderLoaded.bind(this);
reader.readAsDataURL(file);
}
_handleReaderLoaded(e) {
let reader = e.target;
var base64result = reader.result.substr(reader.result.indexOf(',') + 1);
//this.imageSrc = base64result;
let id = this.currentId;
switch (id) {
case 1:
this.sellersPermitString = base64result;
break;
case 2:
this.DriversLicenseString = base64result;
break;
case 3:
this.InteriorPicString = base64result;
break;
case 4:
this.ExteriorPicString = base64result;
break
}
this.log();
}
log() {
// for debug
console.log('1', this.sellersPermitString);
console.log('2', this.DriversLicenseString);
console.log('3', this.InteriorPicString);
console.log('4', this.ExteriorPicString);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51488417
复制相关文章
相似问题