如何解决React dropzone:console.log显示我的整个文件,但仅屏幕仅显示路径
我有一个React TS项目,我正在尝试将文件从react-dropzone上传到我的S3存储桶。问题是:用dropzone在本地加载它们之后,如果我用console.log()来查看文件,则可以看到所有参数:
File
lastModified: 1591991266469
name: "4h_audio_study.xml"
path: "4h_audio_study.xml"
size: 16747
type: "text/xml"
webkitRelativePath: ""
但是如果在屏幕上打印文件,我只会得到以下路径:
{"path":"4h_audio_study.xml"}
由于将“文件”发送到S3时出现此“错误”,因此我收到一条错误消息,因为我实际上仅发送带有路径的对象。
那为什么会这样呢?为什么在打印文件信息时只能看到路径?
我要上传的组件:
export const UploadFilesButton = () => {
const [files,setFiles] = useState<any>([]);
const uploadToS3 = async () => {
const { name = '' } = files[0];
// get the presigned url
const { data: { url: signedRequest } } = await axios.get(`${API_URL}?path=${file.name}`);
axios.put(signedRequest,files[0],{ headers: {'Content-Type': files[0].type }})
.then(result => {
console.log("Response from s3")
console.log(result)
})
.catch(error => {
alert("ERROR " + JSON.stringify(error));
})
}
return (
<div>
<Dropzone
onDrop={(acceptedFiles) => setFiles(acceptedFiles)}
multiple
onDropRejected={() => console.log('File was rejected')}
onDropAccepted={() => console.log('File was accepted')}>
{({getRootProps,getInputProps}) => (
<DropArea {...getRootProps()}>
<input {...getInputProps()} />
<p>Drag 'n' drop some files here,or click to select files</p>
</DropArea>
)}
</Dropzone>
<FilesList>
{files.map((file: any) => (
<div key={file.path}>
{JSON.stringify(file)}
</div>
))}
</FilesList>
<button onClick={() => uploadToS3()}>Upload Files</button>
</div>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。