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] 行我得到以下错误

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

将上传的文件作为字节数组获取的最佳方法是什么？

Answer 1

您需要利用FileReader with 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]);
}

react-dropzone 将上传的文件转换为字节数组

react-dropzone convert uploaded file to a byte array

file-upload

reactjs

react-dropzone