react-dropzone конвертирует загруженный файл в байтовый массив

Question

У меня есть следующий код, я хотел бы взять загруженный файл и передать его в API как массив байтов, возможно ли это?

    interface IData{
        file: Uint8Array
    }
    const [open, setOpen] = React.useState(false);
    <div>
                        <Button variant="contained" color="primary" onClick={() => setOpen(true)}>
                            Add Data
                                            </Button>
                        <DropzoneDialog
                            acceptedFiles={['image/*']}
                            cancelButtonText={"cancel"}
                            submitButtonText={"submit"}
                            maxFileSize={5000000}
                            open={open}
                            onClose={() => setOpen(false)}
                            onSave={(files) => {
                                let data = {} as IData;
                                data.file = files[0];
// Call api here... but
                            setOpen(false);
                        }}
                        showPreviews={true}
                        showFileNamesInPreview={true}
                    />

но в строке data.file = files[0] I получите следующую ошибку:

Type 'File' is missing the following properties from type 'Uint8Array': BYTES_PER_ELEMENT, buffer, byteLength, byteOffset, and 25 more.ts(2740)

Как лучше всего получить загруженный файл в виде массива байтов?

Answer 1

Вам необходимо использовать FileReader с readAsArrayBuffer для преобразования файлового объекта в массив байтов

onSave={(files) => {

     const reader = new FileReader();
     reader.addEventListener('load', () => {
         let data = {} as IData;
         data.file = new Uint8Array(reader.result as ArrayBuffer);
        // call api here 
        setOpen(false);
     });
     reader.readAsArrayBuffer(files[0]);
}