如何在React中实现多文件上传到Firebase并获取文件名

问题根因 #

• 文件覆盖&无法多文件上传：一是文件选择框未开启多文件选择属性，二是所有文件的存储路径固定为images，同路径文件会自动覆盖。
• 无法获取文件名：你未从上传的File实例中提取name属性，该属性可直接调用获取。

修复后的完整代码 #

import { useState } from 'react';
import { getStorage, ref, uploadBytes } from "firebase/storage";
import { app } from './base'

function SubmitApp (){
    // 存储选中的文件列表
    const [fileList, setFileList] = useState([]);

    const onFileChange = (e) => {
        // 获取所有选中的文件
        setFileList(Array.from(e.target.files))
    }

    const onSubmit = (e) => {
        e.preventDefault();
        const storage = getStorage(app)
        // 遍历上传所有文件
        fileList.forEach(file => {
            // 路径添加时间戳前缀，避免同名文件覆盖
            const storageRef = ref(storage, `images/${Date.now()}_${file.name}`)
            uploadBytes(storageRef, file).then(() => {
                // 这里可直接获取文件名
                console.log(`文件${file.name}已上传到Firebase`)
            })
        })
    }
        

    return (
        <form onSubmit={onSubmit} >
             {/* 添加multiple属性支持多文件选择 */}
             <input type='file' name='file' multiple onChange={onFileChange} />
             <button type="submit">Submit</button>
        </form>
    )
}

export default SubmitApp

关键改动说明 #

• 给input[type=file]添加multiple属性，支持按住Ctrl/Command选中多个文件
• 存储路径加入Date.now()前缀+原文件名，既保留了原始文件名，也避免了同名文件覆盖
• 表单触发逻辑改为监听submit事件，避免选完文件就自动上传的问题
• 通过file.name直接获取原始文件名，可直接在上传成功回调中使用

内容的提问来源于stack exchange，提问作者sebvm