从material-ui-dropzone上传的文件中获取Blob,可以通过以下步骤实现:
event.target.files
来获取到文件对象的数组。new Blob([file], { type: file.type })
来创建一个Blob对象,其中file
是文件对象。下面是一个示例代码:
import React from 'react';
import { DropzoneArea } from 'material-ui-dropzone';
class FileUploader extends React.Component {
handleFileUpload(files) {
// 获取上传的文件对象
const file = files[0];
// 获取Blob对象
const blob = new Blob([file], { type: file.type });
// 在这里可以对blob对象进行进一步处理,例如上传到服务器等操作
console.log(blob);
}
render() {
return (
<DropzoneArea
onChange={this.handleFileUpload.bind(this)}
acceptedFiles={['image/*', 'video/*', 'audio/*']}
showPreviews={false}
showPreviewsInDropzone={true}
useChipsForPreview
showAlerts={false}
/>
);
}
}
export default FileUploader;
在上面的示例代码中,我们创建了一个FileUploader
组件,使用DropzoneArea
组件来实现文件上传区域。在handleFileUpload
函数中,我们获取到上传的文件对象,并通过new Blob
方法创建了一个Blob对象。你可以根据实际需求对Blob对象进行进一步处理。
这里推荐使用腾讯云的对象存储服务 COS(Cloud Object Storage),它提供了高可靠、低成本、安全的云端存储服务,适用于各种场景下的文件存储和处理需求。你可以通过以下链接了解更多关于腾讯云对象存储服务 COS 的信息:腾讯云对象存储 COS。
领取专属 10元无门槛券
手把手带您无忧上云