如何映射所有 formData 以上传到 firebase？

问题描述

我正在处理一个需要使用 React 将多个文件上传到 firebase 的项目。目前，我可以遍历“FormData”中的数据，但是，我想保持数据同步（即，如果用户上传 3 个文件，则期望上传到 firebase 存储的文件将与用户的信息保持一致 -名字/姓氏）

以下是我当前 FormData 输出的快速浏览：

我目前使用的代码看起来像这样（这里有很多试验和错误......）：

import React,{ useState } from "react";
import Confetti from "react-confetti";
import Swal from "sweetalert2";
import { makeStyles } from "@material-ui/core/styles";
import { Link } from "react-router-dom";
import { useData } from "./DataContext";
import { MainContainer } from "./components/MainContainer";
import { PrimaryButton } from "./components/PrimaryButton";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import InsertDriveFile from "@material-ui/icons/InsertDriveFile";
import { db } from './localfirebaseconfig';

/* Firebase Imports */
import 'firebase/firestore';
import { useFirestoreDocData,useFirestore } from 'reactfire';



const useStyles = makeStyles({
  root: {
    marginBottom: "30px",},table: {
    marginBottom: "30px",});

export const Result = () => {
  const [success,setSuccess] = useState(false);
  const styles = useStyles();
  const { data } = useData();


  const entries = Object.entries(data).filter((entry) => entry[0] !== "files");
  const { files } = data;

  const onSubmit = async () => {
    const formData = new FormData();
    if (data.files) {
      data.files.forEach((file) => {
        formData.append("files",file,file.name);
      });
    }

    entries.forEach((entry) => {
      formData.append(entry[0],entry[1]);
    });


    let formEntries = 0;

    for (let pair of formData.entries()){
      console.log(pair)
    
    }

    // for (let i = 0; i < formEntries; i++){
    //   for(let data of formData.entries()){
    //     let test = {
    //       firstName: data[0] == 'firstName',//       lastName: data[0] == 'lastName',//     }
    //     console.log(data)
    //   }
    // }

    const form_stuff = new Map(formData.entries())

    

    // db.collection('test').doc().set({testing:'THis is a test'})

    // if (true) {
    //   Swal.fire("Great job!","You've passed the challenge!","success");
    //   setSuccess(true);
    // }
  };

  // if (true) {
  //   return <Confetti />;
  // }

  return (
    <>
      <MainContainer>
        <Typography component="h2" variant="h5">
          ? Form Values
        </Typography>
        <TableContainer className={styles.root} component={Paper}>
          <Table className={styles.table} aria-label="simple table">
            <TableHead>
              <TableRow>
                <TableCell>Field</TableCell>
                <TableCell align="right">Value</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {entries.map((entry) => (
                <TableRow key={entry[0]}>
                  <TableCell component="th" scope="row">
                    {entry[0]}
                  </TableCell>
                  <TableCell align="right">{entry[1].toString()}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
        {files && (
          <>
            <Typography component="h2" variant="h5">
              ? Files
            </Typography>
            <List>
              {files.map((f,index) => (
                <ListItem key={index}>
                  <ListItemIcon>
                    <InsertDriveFile />
                  </ListItemIcon>
                  <ListItemText primary={f.name} secondary={f.size} />
                </ListItem>
              ))}
            </List>
          </>
        )}
        <PrimaryButton onClick={onSubmit}>Submit</PrimaryButton>
        <Link to="/">Start over</Link>
      </MainContainer>
    </>
  );
};

如果有帮助，这里是 git repo 中的代码 - https://github.com/Double-Edge-Software/ultimate-react-hook-form-form

伴随着堆栈闪电战 -- https://stackblitz.com/github/Double-Edge-Software/ultimate-react-hook-form-form

任何帮助和/或朝正确方向的推动都会有很大帮助！

谢谢

解决方法

看起来 FormData.entries() 为您提供了一个仅包含长度为 0 的迭代器的数组。

但是，您可以使用 Array.from() 从迭代器构建数组。

我能够像这样映射 FormData 条目：

let form = document.querySelector('#myform');
let formData = new FormData(form);

Array.from(formData.entries())
  .map((entry,index) => { 
    console.log(`${index}: ${entry}`) 
});