javascript - 如何使用 React JS 将 MP3 文件上传到 Firebase-Firestore 数据库？

Question

我实际上有两个问题，第一个是关于我的代码。第二个是如何通过react将mp3文件上传到Firestore云数据库。

以下代码应该是一个可以在云存储集合中轻松添加新文档的表单:

import React, {useState} from 'react';
import db from '../index';

const AddSongs = () => {
    const [song, setSong] = useState('');
    const [artist, setArtist] = useState('');
    const [src, setSrc] = useState('');


    const inSubmit = (e) =>{

        e.preventDefault();

        let songBase = db.collection('songs');
        let data = {song, artist, src}

        songBase
            .add(data)

    }


    return ( 
        <div>
            <form onSubmit={inSubmit}>
                <label>
                    Add Your Track
                </label>
                <input type="text" placeholder="Name of the track" value={song} onChange={e => 
                 setSong(e.target.value)} />
                <input type="text" placeholder="Name of the artist" value={artist} onChange={e => 
                 setArtist(e.target.value)} />
                <input type="file" value={src} onChange={e => setSrc(e.target.value)} />
                <div>
                    <input type="submit" value="add it" />
                </div>
            </form>
        </div>
    );
}

export default AddSongs;

文档已成功添加到云存储中，作为普通文档，属性为歌曲、艺术家和源。 这是另一个代码，然后应该获取集合中的当前数据并将其渲染到 jsx div

import React, {useState} from 'react';
import db from '../index';

const SongList = () => {
    const [list, setList] = useState([])

    let songbase = db.collection('songs')

    songbase.onSnapshot(snapshot =>{
        snapshot.docs.forEach(doc =>{
            setList([...list, {song: doc.song, artist: doc.artist, src: doc.src, id: Math.random(0,1)}])
        })
    })

    const renderedList = list.length ? (list.map(songItem =>{
        return(
            <div key={songItem.id}>
                <span>{songItem.song}</span>
                <audio controls>
                    <source src={songItem.src} type="audio/mpeg" />
                </audio>
                <span>{songItem.artist}</span>
            </div>
        )
    })) : (<h1>nope !</h1>)
    return ( 
        <div>
            {renderedList}
        </div>
     );
}

export default SongList;

然后这里发生的是songItem(在空jsx内渲染)不断重复并不断向下滚动..!

第二个问题是如何从本地设备将 mp3 文件添加到 firebase 云存储，因为 (src) 将 mp3 文件路径作为字符串添加到文档属性中，例如:C:\fakepath\Black Sabbath -坠落世界边缘(附歌词).mp3。

很抱歉问了这么长的问题，我们将非常感谢您的帮助。

Answer 1

尝试使用react-firebase-file-uploader包。

它由诸如 storageRef 之类的 Prop 组成 - 对 firebase 存储文件夹的引用，文件应保存在其中。

onUploadStart、onProgress、onUploadSuccess、onUploadError、文件名、元数据、randomizeFilename、maxHeight、maxWidth 以及许多其他有用的属性。

这里是更多详细信息的引用链接。 Click here