如何在React中将文件转换为Base64

Question

我有一个React的注册页面，需要将文件上传到服务器。这些文件需要进行Base64编码。

进行编码的函数如下：

getBase64(file) {
        let document = "";
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
            document = reader.result;
        };
        reader.onerror = function (error) {
            console.log('Error: ', error);
        };

        return document;
    }

处理表单下一步按钮点击的函数如下：

handleNextButtonClick(event){
    event.preventDefault();
    let data = {domainId: this.props.user[0].domainId, name: steps.stepThree, values: this.state.files};

    let idCard = this.state.files.filter(file => file.file_type === "ID_CARD")[0].values.file;
    let statuses = this.state.files.filter(file => file.file_type === "STATUTES")[0].values.file;
    let blankLetterHead = this.state.files.filter(file => file.file_type === "LETTER_HEAD")[0].values.file;
    let companyPhoto = this.state.files.filter(file => file.file_type === "COMPANY_PICTURE")[0].values.file;


    let idCardBase64 = this.getBase64(idCard);
    let statusesBase64 = this.getBase64(statuses);
    let blankLetterHeadBase64 = this.getBase64(blankLetterHead);
    let companyPhotoBase64 = this.getBase64(companyPhoto);
}

如果我打印出例如this.state.files.filter(file => file.file_type === "ID_CARD")[0].values.file;中的第一个结果，我会得到下面的结果：

看起来一切正常，但是我收到了错误：

Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

有什么解决办法吗？

更新

let idCardBase64 = idCard ? this.getBase64(idCard) : "";
let statusesBase64 = statuses ? this.getBase64(statuses) : "";
let blankLetterHeadBase64 = blankLetterHead ? this.getBase64(blankLetterHead) : "";
let companyPhotoBase64 = companyPhoto ? this.getBase64(companyPhoto) : "";

我已更改它。在这种情况下仅存在 idCard。现在我不会收到任何错误，但是idCardBase64是""而且没有进行Base64编码。

- Boky

---

文件读取代码看起来很正常。你能验证这4个文件是否存在吗？ - Ajay Dharnappa Poojary

@AjaySuvarna，我更新了我的问题。 - Boky

可能与您在状态中存储/过滤数据的方式有关？您能展示一个状态的例子吗？例如 statuses = this.state.files.filter(file => file.file_type === "STATUTES")，这应该是STATUSES还是STATUTES？ - Daniel Andrei

文件读取是异步的，所以从getBase64函数返回的是空字符串。 - Ajay Dharnappa Poojary

Answer 1

文件读取是异步的。因此使用回调或 Promise 来解决您的问题。

let idCardBase64 = '';
this.getBase64(idCard, (result) => {
     idCardBase64 = result;
});

并使用回调函数来返回获取的数据。

getBase64(file, cb) {
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
        cb(reader.result)
    };
    reader.onerror = function (error) {
        console.log('Error: ', error);
    };
}

- Ajay Dharnappa Poojary

---

我们如何在控制台输出从读取器中获取的base64结果？ - Happy Patel

@HappyPatel 在执行 getBase64 方法后，你可以在 idCardBase64 中使用 console.log。 - Fred

Answer 2

此外，您可以使用这个React组件 React File Base64

请查看演示

- Mostafa Nawara

Answer 3

如果你只使用https://www.npmjs.com/package/react-file-base64，那将使事情变得简单得多。

在表单中使用以下内容作为输入字段来处理编码。

以下是我的参考代码。

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

- dwbra

---

简单的解决方案，这个包对我很有效。 <FileBase type="file" multiple={false} onDone={({ base64 }) => setSingleFile({ selectedFile: base64 })} onChange={(e) => e.target.files[0]} /> - Hassan Khan

Answer 4

从接受的答案延伸，语法更加简洁一点。

async function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
      resolve(reader.result)
    }
    reader.onerror = reject
  })
}

// usage
await getBase64(file) // `file` your img file
  .then(res => console.log(res)) // `res` base64 of img file
  .catch(err => console.log(err))

- first