我正在尝试向我的服务器发送api请求,该服务器上有一些我要发送的文件。
我制作了一个自定义对象数组,其中有两个参数,文件扩展名和已编码的原始数据库654
onSubmitHandler = (e) =>{
e.preventDefault()
const contactRequest = {
email: this.state.email,
name: this.state.name,
message: this.state.message,
files: this.state.files,
result: this.state.files.map(file => ({
"file": this.findFileTypeHandler(file.name),
"data": this.getBase64(file)
}))
}
console.log(this.getBase64(this.state.files[0]))
console.log(contactRequest)
}
问题出在我的getBase64函数中
我尝试了几种方法。 getBase64 = file => {
let ans = ''
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result) //logged correctly here, but after undefined is returned
ans = reader.result
};
reader.onerror = function (error) {
console.log('error is ', error)
return error;
};
return ans;
}
正确答案正确记录,但首先返回未定义。这是由于它的异步行为。
有没有办法,所以我可以让它等到正确加载函数。
起初,我虽然打算采用异步等待方法,但由于我已经在计划向服务器发出请求时使用promise,所以我认为这样做会很混乱。
答案 0 :(得分:0)
好的,这很简单。将回调函数传递给getBase64,然后该回调函数将接收结果。不需要那么多修改:
getBase64 = (file, callBack) => {
let ans = '';
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
callBack(reader.result);
};
reader.onerror = error => {
console.log('error is ', error);
return error;
};
};
稍后您可以将其用作:
getBase64(target, res => console.log(res));
或者,如果您希望将结果存储在变量中,则可以执行以下操作:
let b64;
getBase64(target, res => { b64 = res; });
答案 1 :(得分:0)
检查一下
FileBase type="file" multiple={false}
我的代码如下所示以供参考。
<FileBase
type="file"
multiple={false}
onDone={({base64}) => setListingData({ ...listingData, selectedFile: base64})}
/>