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;
 }

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

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

起初，我虽然打算采用异步等待方法，但由于我已经在计划向服务器发出请求时使用promise，所以我认为这样做会很混乱。

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})}
/>

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

2 个答案: