base64 编码器在 React 中返回未定义

Question

我正在尝试向我的服务器发出一个 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;
 }

正确记录正确答案，但它首先返回未定义。这是由于它的异步行为。

有没有办法，所以我可以让它等到函数正确加载。

我最初是关于制作异步等待方法，但我认为这会变得混乱，因为我已经在计划使用承诺，当我向我的服务器发出发布请求时。

Answer 1

好的，

这是一个简单的问题。将回调函数传递给 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; });

Answer 2

检查

FileBase type="file" multiple={false}

我的代码如下所示以供参考。

<FileBase 
    type="file"
    multiple={false}
    onDone={({base64}) => setListingData({ ...listingData, selectedFile: base64})}
/>