将视频文件 mp4 从 react 上传到谷歌云存储

时间:2021-06-12 13:38:14

标签: reactjs google-cloud-storage

我正在尝试在我的 React 应用程序中将视频上传到谷歌云存储,以便我可以记录响应并获取上传的视频 URL。我对如何实现这一目标感到困惑。我正在使用 React FilePond 进行上传。

下面的代码

const [videoCollection, setVideoCollection] = useState('')

    const onFileChange = (files) => {
        let items = files.map(fileItem => fileItem.file)
        setVideoCollection([...VideoCollection, items])
    }

    const onSubmit = (e) => {
        e.preventDefault()

        var formData = new FormData()

        for (let videofile in videoCollection[0]) {
            formData.append('videoCollection', videoCollection[0][videofile])
        }

        formData.append('folder', 'folder-name')

        axios.post(`${process.env.REACT_APP_API_ENDPOINT}/`, formData, {
        }).then(res => {
            console.log(res.data)
        })
    }

return (
<form onSubmit={onSubmit}>
    <div className="form-group">
        <button className="btn btn-primary" type="submit">Upload</button>
    </div>
    <div className="filepond-wrapper">
        <FilePond 
            files={imgCollection}
            allowMultiple={true}
            server={null}
            instantUpload={false}
            onupdatefiles={(fileItems) => onFileChange(fileItems)}>
        </FilePond>
    </div>
</form>
)

0 个答案:

没有答案